Я хочу автовоспроизведение слайдера

var mainSwiper = new Swiper(".swiper-container-v", {
    direction: "vertical",
    kyboard: true,
    pagination: {
        el: ".swiper-pagination-v",
        clickable: true
    },
    mousewheel: true,
    slideToClickedSlide:true,
    
});
var swiperH = new Swiper(".swiper-container-h", {
    spaceBetween: 50,
    pagination: {
        el: ".swiper-pagination-h",
        clickable: true
    },
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
});

<!DOCTYPE html>
<html lang = "en" >
<head>
  <meta charset = "UTF-8">
  <title>CodePen - Vsite Test2018</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css'><link rel = "stylesheet" href = "./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!-- Top Sliders  -->

                
                <!--TOP SLIDER STARTS HERE -->
                <div class = "top-slider-container">
                    <div class = "swiper-container swiper-container-h">
          <div class = "swiper-wrapper">
                        
                        <!--Slide 01 -->
            <div class = "swiper-slide">
                            
                            <div class = "top-slide-left">
                                <h4>Explore the Power of</h4>
                                <h2>AI + VR</h2>
                                <p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p>
                                <a class = "top-slider-button" href = "">Watch the Video</a>
                            </div>
                            <div class = "top-slide-right">
                                <div class = "slide-right-img-container slide-in-fwd-center">
                                    <img class = "" src = "http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt = "">
                                </div>
                            </div>
                        </div>
                        
                        <!--Slide 02 -->
            <div class = "swiper-slide">
                            
                            <div class = "top-slide-left">
                                <h4>Experience</h4>
                                <h2>Immersive Analytics</h2>
                                <p>Full collaboration capabilities across multiple devices: run your analysis on Desktop, Mobile and Virtual Reality. </p>
                                <a class = "top-slider-button" href = "">Watch the Video</a>
                            </div>
                            <div class = "top-slide-right">
                                <div class = "slide-right-img-container slide-in-fwd-center">
                                    <img class = "" src = "http://malachisimonyan.com/uploads/v-temp/plat-monitor.png" alt = "">
                                </div>
                            </div>
                        </div>
                        
                        <!--Slide 03 -->
            <div class = "swiper-slide">
            
                            <div class = "top-slide-left">
                                <h4>Explore Data using</h4>
                                <h2>Innovative Maps</h2>
                                <p>Look at your geo located data as never before thanks to our interactive maps: visualize on 2D maps or 3D globe!</p>
                                <a class = "top-slider-button" href = "">Watch the Video</a>
                            </div>
                            <div class = "top-slide-right">
                                <div class = "slide-right-img-container slide-in-fwd-center">
                                    <img class = "" src = "http://malachisimonyan.com/uploads/v-temp/slidemaps.png" alt = "">
                                </div>
                            </div>
                        
                        </div>
            
                        <!--Slide 04 -->
                        <div class = "swiper-slide">
                            
                            <div class = "top-slide-left">
                                <h4>Engage & Share using</h4>
                                <h2>Collaborative Analysis</h2>
                                <p>SVO – Shared Virtual Office™: collaborative and fully customizable shared space to analyze data, build VR dashboards, present and discuss insights. </p>
                                <a class = "top-slider-button" href = "">Watch the Video</a>
                            </div>
                            <div class = "top-slide-right">
                                <div class = "slide-right-img-container slide-in-fwd-center">
                                    <img class = "" src = "http://malachisimonyan.com/uploads/v-temp/slidemaps-final.png" alt = "">
                                </div>
                            </div>
                        
                        </div>
            
                        <!--Slide 05 -->
                        <div class = "swiper-slide">
                            <div class = "top-slide-left">
                                <h4>Explore the Power of</h4>
                                <h2>Smart Mapping</h2>
                                <p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p>
                                <a class = "top-slider-button" href = "">Watch the Video</a>
                            </div>
                            <div class = "top-slide-right">
                                <div class = "slide-right-img-container slide-in-fwd-center">
                                    <img class = "" src = "http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt = "">
                                </div>
                            </div>
                        </div>
                        
          </div> <!--End Swiper Wrapper-->
                        
          <div class = "swiper-pagination swiper-pagination-h"></div>
                    
                        <!-- Add Arrows -->
          <div class = "swiper-button-next swiper-button-white"></div>
          <div class = "swiper-button-prev swiper-button-white"></div>
                        
        </div>
                </div>
            </div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src = "./script.js"></script>

</body>
</html>

Я хочу, чтобы ползунок в примере воспроизводился автоматически.

var mainSwiper = new Swiper(".swiper-container-v", {
    direction: "vertical",
    kyboard: true,
    pagination: {
        el: ".swiper-pagination-v",
        clickable: true
    },
    mousewheel: true,
    slideToClickedSlide:true,
    
});

Я хочу добавить функцию автозапуска в код в примере.

javascript css slide

13.11.2022 13:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это очень просто, вам просто нужно добавить свойство автозапуска в свой код. Пожалуйста, проверьте этот код. Я надеюсь, что вы получите свой ответ

var swiper = new Swiper('.swiper-5', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: true,
  },
});

13.11.2022 13:52

Другие вопросы по теме

Как удалить специальный круглый знак в письме на хинди?

Есть ли способ нарисовать вертикальные несколько строк в svg?

Как применить эффект наведения к каждому прямому дочернему элементу отдельно в CSS?

Создайте простую галерею изображений CSS

Пользовательский интерфейс материала MUI - Как сделать меню полной ширины?

Не удается отобразить значок CSS, наложенный на значок Font Awesome

Настройка стиля элемента web3uikit

У меня проблема с функцией JS, которая не меняет класс html

Реагировать на сетку данных закрепленных таблиц с липким заголовком

Как изменить цвет определенных слов в <textarea>?

Я хочу автовоспроизведение слайдера

Ответы 1

Другие вопросы по теме

Похожие вопросы