Как изменить ширину jQuery Skitter.js Slideshow? - PullRequest
Новая
       1

Как изменить ширину jQuery Skitter.js Slideshow?

0 голосов
/ 24 сентября 2018

Я хочу изменить ширину и высоту слайдера jquery skitter.Я попытался переопределить jquery.css по умолчанию на ширину 100% с помощью «Important!

». Предполагается переопределить встроенные правила, но я не могу контролировать ширину и высоту. Какое решение для этоговопрос? 

$(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 голосов
/ 24 сентября 2018

Вы можете просто переопределить ширину слайдера, а также соответствующую ширину изображения.Скрипка: 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>
0 голосов
/ 24 сентября 2018

Использование !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 и перезаписывайте существующие правила с более высокой специфичностью .

Вот рабочий пример использования #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...