Блог

Главная - Вопросы по программированию - Можно ли использовать css для зацикливания слайдера flexbox?

Можно ли использовать css для зацикливания слайдера flexbox?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создал карусель, используя flexbox: мне нужно, чтобы она скользила каждые 3 секунды и повторяла цикл, добавляя кнопки «предыдущая» и «следующая» по бокам, добавляя точки навигации под ней. Есть ли способ сделать это с помощью css? Или мне нужно использовать jquery? Это мой код карусели: 

 <section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php   
    if( have_rows('logos') );
     while( have_rows('logos') ): the_row(); 
        $image = get_sub_field('logo_image');
        $content = get_sub_field('name');
?>
    <span class="logo_slide">
        <img src="<?php echo $image['url']; ?>" />
    </span>

    <?php endwhile; ?>
    <?php endif; ?>
</div>
</section>

Это css: 

    .section-logo {
  width: 100%;
  height: 100%;
}

.logo_carousel {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}

.logo_carousel::-webkit-scrollbar {
  display: none;
}

.logo_slide img {
  width: 195px;
  height: 115px;
}

.logo_slide {
  flex-shrink: 0;               /* added, so it won't shrink  */
  display: flex;                /*  added  */
  align-items: center;          /*  added  */
  justify-content: center;      /*  added animation: slide-it 10s infinite; */
  width: 195px;
  height: 115px;
  margin: 5px;
}

.logo_slide:hover .logo_tt {
  visibility: visible;
}

Также я пытаюсь добавить значки навигации и стрелки слайдера с помощью HTML-кода после <div class="logo_carousel"> , но он не отображается. Куда я должен поместить этот код?
Если мне нужно использовать javascript, как я должен заставить его скользить с помощью javascript?

Комментарии:

1. Почему бы не использовать библиотеку, подобную github.com/kenwheeler/slick ?

2. Здесь вы бы использовали Javascript, css на самом деле не является языком программирования для обработки подобных вещей. Вы можете использовать функцию javascript setInterval() , чтобы установить интервал времени в миллисекундах для запуска функции для изменения стиля элемента (ов). Существует множество библиотек, которые помогут вам сделать это, включая bootstrap. w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

3. Я использую sage, и если я попытаюсь добавить javascript в файл маршрута, страница просто перезагружается снова и снова.

4. Вот пример чистого слайдера css. Но это не flexbox. Может быть, вы этого хотите codepen.io/drygiel/pen/rtpnE