如何更改jQuery Skitter.js幻灯片的宽度？

时间：2018-09-24 13:27:11

标签： javascript jquery html css skitter-slider

我想更改skitter jquery滑块的宽度和高度。我尝试使用“重要！”将默认的jquery.css覆盖100％的宽度。

应该覆盖内联规则，但是我无法控制宽度和高度。该问题的解决方案是什么？

$(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>

如您所见，我无法覆盖内联样式。

2 个答案:

答案 0 :(得分：0)

使用!important被认为是不好的做法。您只需将所需的width设置为其容器即可调整“滑块”的大小。

这是一个工作示例，其中容器元素<header>的大小为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>

如注释中所建议，您还可以通过设置新的max-width来调整滑块的宽度。尝试避免使用!important，并用a higher specificity覆盖现有规则。

这是一个使用#main-header > .skitter作为选择器的有效示例：

$(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>

答案 1 :(得分：0)

您可以覆盖滑块的宽度以及相应的图像宽度。 小提琴：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>

相关问题
最新问题