AlexanderLebedev

Работа слайдера с bootstrap

Recommended Posts

Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок.

Скрытый текст

slidRab.thumb.png.0812423da7d7812ecbd1dc96fbbc0857.png

А когда всё на месте, с скрытием, то он показывает так

Скрытый текст

Slid!Rab.thumb.png.13f09f72953117a58e4fe3bfc135b214.png

Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было.

<!-- Наружная реклама -->
<div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО
  <div class="container header">
    <div class="row align-items-center">
      <div class="card-body card align-items-center bg-lightgrey">
        <h5>
          <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80">
          Наружное и внутреннее оформление
        </h5>
      </div>
    </div> 
  <!-- Слайдер -->
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
      </div>
        <div class="swiper-button-next"></div> 
        <div class="swiper-button-prev"></div>
  </div>
  <!-- Конец слайдера -->
 </div>
</div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО
<!-- Конец наружной рекламы -->

СКРИПТЫ В КОНЦЕ BODY

<!-- Скрипты -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="js/slider.js"></script>
  <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: false,
      loopFillGroupWithBlank: false,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  </script>
  <script src="js/bootstrap.js"></script>
<!-- Конец скрипты -->

 

После уменьшении или увеличении страницы всё работает как надо. Что за логика ?

Share this post


Link to post
Share on other sites

Проблема решена.

 

var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          spaceBetween: 30,
          loop: false,
          loopFillGroupWithBlank: false,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
          debugger: false
    });

 

          observer: true,
          observeParents: true,

Нужно было воткнуть

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marizza40
      Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 
      Есть не анимированный слайдер
      <div class="slider"> <div class="slider_site"> <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line"> </div> <div class="txt_left"> <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1> <div class="button"> <a href="#" class="button_a">Подробнее</a> </div><!--/.button--> </div> <div class="slider_site"> <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line_two"> </div> <div class="txt_left"> <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1> <div class="button"> <a href="#" class="button_a_one">Подробнее</a> </div><!--/.button--> </div> </div> Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 
      CSS:
      /*slider*/ .slider{ display: flex; font-family: 'Roboto', sans-serif; } .slider_h{ position: absolute; color: #fff; top: 32%; left: 7%; font-size: 86px; line-height: 85px; text-align: right; } .slider_h_two{ position: absolute; color: #fff; top: 32%; left: 52%; font-size: 86px; line-height: 85px; } .slider_site{ width: 100%; } .img_slider{ width: 100%; position: relative; } .slider_line{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 42%; } .slider_line_two{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 57%; } /*button*/ .button_a{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 39%; } .button_a:hover{ color: #0092db; text-decoration: none; } .button_a_one{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 52%; } .button_a_one:hover{ color: #0092db; text-decoration: none; }  
    • By marizza40
      Первый раз создаю сайт на хостинге. Не видит блок о компании. Он в конструкции есть, на сайте пустота.  

    • By digenis
      Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке.  https://jsfiddle.net/Lyguc520/3/

  • Member Statistics

    46,530
    Total Members
    3,128
    Most Online
    6eJlbIu
    Newest Member
    6eJlbIu
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
      А как через javascript обратиться к базе данных?
       
    • начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в SQL, то в вашем случае это может выглядеть:

      table
      date_start | date_stop | type | color | capacity | carrying

      одна строка - одна позиция
      SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
      Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
      например:

      <form method="post">
      <input name="date_start">
      <input name="date_stop">
      ....
      type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
      capacity и carrying возможно потребуется возможность указания диапазона (от и до)
      ....
      </form>

      все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
      если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
      ... WHERE `table`.`date_start` = $_POST['date_start']
      в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

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

      Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

      Там есть формы: 
      - Дата начала аренды
      - Дата конца аренды
      - Тип транспорта
      - Цвет
      - Вместимость
      - Грузоподъемность Буду очень благодарен тому кто распишет как все это работает, а то понять не могу, что-то для меня это совсем темное и туманное.... 
  • Popular Contributors