0

Здравствуйте. Пишу слайдер-карусель. Возникла проблема. Он не адаптировался под разрешение экрана. Проблему исправил путем js но теперь при изменении размеров окна браузера конструкция ломается. Подскажите, как заставить из функции ресайза передавать значение в функцию слайдера и делать это каждый раз при ресайзе.

var width = $('.sliders-container').width();
$(document).ready(function slider() {
  var screen = $(window).width();

  $('.slider>li').width(width);
  $('.slider').width(width * $('.slider>li').length);


  $('.slider').css('left', -width);
  $('.slider>li:last-child').appendTo('.slider');

  function nextSlide() {
    $('.slider').animate({
      'margin-left': -width
    }, 500, function() {
      $('.slider>li:first-child').appendTo('.slider');
      $('.slider').css('margin-left', 0);
    });
  }

  function prevSlide() {
    $('.slider').animate({
      'margin-left': width
    }, 500, function() {
      $('.slider>li:last-child').prependTo('.slider');
      $('.slider').css('margin-left', 0);
    });
  }

  $('.next').click(nextSlide);
  $('.prev').click(prevSlide);

  $(window).resize(function resize() {
    var screen = $(window).width();
    $('.slider>li').css('width', screen);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sliders-container">
  <ul class="slider">
    <li>
      <img class="slider-item" src="IMG/1.jpg" alt="">
      <div class="slider-caption">
        <h3>Lorem ipsum dolor.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </li>
    <li>
      <img class="slider-item" src="IMG/2.jpg" alt="">
      <div class="slider-caption">
        <h3>Quidem, eius, minima.</h3>
        <p>Tempora facilis voluptatibus neque libero corrupti, aliquam est.</p>
      </div>
    </li>
    <li>
      <img class="slider-item" src="IMG/3.jpg" alt="">
      <div class="slider-caption">
        <h3>Exercitationem, nam, est.</h3>
        <p>Nesciunt, a eveniet totam explicabo, vitae dolorem eum?</p>
      </div>
    </li>
  </ul>

  <div class="prev">&#10094</div>
  <div class="next">&#10095</div>

  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

</div>

1 ответ 1

0

В jQuery есть метод .resize() - https://api.jquery.com/resize/. Но я бы лучше использовал css для адаптивности.

    $( window ).resize(function() {
        $( ".slider" )......;
    });
2
  • Используйте media-css , и адаптируйте под разные разрешения
    – Dmitriy
    2 фев 2018 в 9:44
  • Проблема как я думаю именно в моем желании сделать карусель адаптивной. По умолчанию как видно в скрипте, контейнер равен ширине слайда, умноженного на количество. Видимая область же равна слайду, но также я хочу сделать ее адаптивной. width 100% как сразу понятно, тянет контейнер на всю область ленты карусели. Потому и такие заморочки с jQuery. 2 фев 2018 в 9:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.