Простой легкий адаптивный слайдер со свайпом на мобильной версии bxSlider

Простой легкий адаптивный слайдер со свайпом на мобильной версии bxSlider

Здравствуйте. В этом огромном разнообразии слайдеров изображений и текста так мало чего-то универсального и легкого в установке. То конфликт скриптов, то нужно подключить огромная кучу этих скриптов, то еще что-то. А еще ведь нужно, чтобы всё это работало в мобильной версии. Я для себя нашел решение - bxSlider. Даже скачивать ничего не нужно! Коротко:

1. В head подключаем скрипты и стили

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>

2. В тело сайта добавляем

<div class="bxslider">
<div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

А вот страница со слайдером целиком:

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>
</head>
<body>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
</body>
</html>

Всё! слайдер работает и свайпиться на мобильных! У меня всё!

Помогла статья? Угости чашечкой кофе =)

Если вы не видите кнопку "Скачать"
отключите блокировщик рекламы

Комментарии ()

  1. виталий 19 декабря 2021, 01:03 # 0
    Скажите пожалуйста, а если надо несколько слайдов прописать в каждой по десяток фото на одной странице, как это сделать?
    1. Эрадж Шамс 03 февраля 2022, 21:28 # 0
      просто добавляете еще один блок
      <div class="bxslider">
      <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
      <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
      <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
      </div>

    Не то, что искали? Воспользуйтесь поиском