How to change the width of jQuery Skitter.js Slideshow?

Question

I want to change the width and height of skitter jquery slider. I tried to override the default jquery.css by the width 100% with "important!

It is supposed to override the inline rules but i can't control the width and the height. What is the solution for this issue ?

$(function() {
  $('#slider').skitter({
    theme : 'square',
    navigation : true,
    label : false,
    dots : false,
   
  });

 });

    height: 600px; 
    position: relative;
    color: #FFF;
    overflow: hidden;
}
.skitter,.skitter-square{
    width:1300px !important;
    margin: 0
}
.container_skitter {
    width:1300px !important;
     
}

.box_skitter {
    width:1300px !important;
    
}

.box_skitter img {
    width:1300px !important;
     
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/Normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
    <!--
        font-family: 'Montserrat', sans-serif;
        font-family: 'Raleway', sans-serif;
        font-family: 'Poor Story', cursive;
    -->
    <link href="css/skitter.css" type="text/css" media="all" rel="stylesheet" />
    <link rel="stylesheet" href="css/app.css">
    <title>Santa</title>
</head>

<body>
  

    <header id="main-header">
        <div class="skitter" id="slider">
            <ul>
                <li>
                    <a href="#cut">
                        <img src="images/slide_1.jpg" class="cut" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="#swapBlocks">
                        <img src="images/slide_2.jpg" class="swapBlocks" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="#swapBarsBack">
                        <img src="images/slide_3.jpg" class="swapBarsBack" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
 
    </header>


    <!--Scripts-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.skitter.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>

</html>

As you can see, I can't override the inline style.

andreas · Answer 1 · 2018-09-25T17:20:38.007

The use of !important is considered as bad practice. You can simply adjust the Sliders size by setting the desired width to its container.

Here is a working example, where the container element <header> has a size of 50%:

$(function() {
  $('#slider').skitter({
    theme: 'square',
    navigation: true,
    label: false,
    dots: false,
  });
});

header {
  width: 50%;
}

<link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
  <div class="skitter" id="slider">
    <ul>
      <li>
        <a href="#cut">
          <img src="https://www.placehold.it/300x200/023" class="cut" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
      <li>
        <a href="#swapBlocks">
          <img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
      <li>
        <a href="#swapBarsBack">
          <img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
    </ul>
  </div>

</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow@5.1.4/dist/jquery.skitter.min.js"></script>

As suggested in the comments, you can also adjust the sliders width by setting a new max-width. Try to avoid the use of !important and overwrite existing rules with a higher specificity.

Here is a working example using #main-header > .skitter as selector:

$(function() {
  $('#slider').skitter({
    theme: 'square',
    navigation: true,
    label: false,
    dots: false,
  });
});

#main-header > .skitter {
  max-width: 50%;
}

<link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
  <div class="skitter" id="slider">
    <ul>
      <li>
        <a href="#cut">
          <img src="https://www.placehold.it/300x200/023" class="cut" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
      <li>
        <a href="#swapBlocks">
          <img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
      <li>
        <a href="#swapBarsBack">
          <img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
        </a>
        <div class="label_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
          </p>
        </div>
      </li>
    </ul>
  </div>

</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow@5.1.4/dist/jquery.skitter.min.js"></script>

i just found the solution .. i needed to override the max-width (not the width) — Amine Louni, Sep 24 '18 at 13:53

Sumesh TG · Answer 2 · 2018-09-24T14:07:13.110

You may just override the width of slider as well as corresponding image width. Fiddle : http://jsfiddle.net/sumeshnu/5n9yz8tg/3/

.skitter,.skitter-square{
    width:1300px !important;
    margin: 0
}
.container_skitter {
    width:1300px !important;
     
}

.box_skitter {
    width:1300px !important;
    
}

.box_skitter img {
    width:1300px !important;
     
}
#slider{
      max-width: 400px !important;
    height: 800px;
}
div#slider img {
    max-width: 400px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>



<script src="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/jquery.skitter.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/Normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
    <!--
        font-family: 'Montserrat', sans-serif;
        font-family: 'Raleway', sans-serif;
        font-family: 'Poor Story', cursive;
    -->
    <link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.css" type="text/css" media="all" rel="stylesheet" />
    <link rel="stylesheet" href="css/app.css">
    <title>Santa</title>
    <script>
   $(document).ready(function(){
   
  $('#slider').skitter({
    theme : 'square',
    navigation : true,
    label : false,
    dots : false,
   
  });

 });
    </script>
</head>

<body>
  

    <header id="main-header">
        <div class="skitter" id="slider">
            <ul>
                <li>
                    <a href="#cut">
                        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="cut" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="#swapBlocks">
                        <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="swapBlocks" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
                <li>
                    <a href="#swapBarsBack">
                        <img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" class="swapBarsBack" />
                    </a>
                    <div class="label_text">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
 
    </header>


    
</body>

</html>

How to change the width of jQuery Skitter.js Slideshow?

2 Answers2