Top.Mail.Ru
p
Главная arrow icon Вопросы arrow icon Технологии arrow icon JavaScript,Ajax,HTML arrow icon Подскажите пожалуйста как сделать автоматическую смену…

Подскажите пожалуйста как сделать автоматическую смену слайдов и зациклить их? - вопрос №5824672

<div class="_codeblock_1swnx_25"> <code class="language-htmlbars hljs language-handlebars" data-highlighted="yes"><span class="language-xml"><span class="hljs-comment"><!-- Слайдер с именем mySwipe1--></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper mySwiper1"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-slide slide1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-slide slide2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-slide slide3"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-slide slide4"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-pagination"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-button-next"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-button-prev"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></code><br /><br /> <code class="language-javascript hljs" data-highlighted="yes"><!-- Иницилизируем слайдер с именем mySwiper1 c влево, вправо, буллеты--> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> <span class="hljs-keyword">var</span> swiper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Swiper</span>(<span class="hljs-string">".mySwiper1"</span>, { <span class="hljs-attr">navigation</span>: { <span class="hljs-attr">nextEl</span>: <span class="hljs-string">".swiper-button-next"</span>, <span class="hljs-attr">prevEl</span>: <span class="hljs-string">".swiper-button-prev"</span>, }, <span class="hljs-attr">pagination</span>: { <span class="hljs-attr">el</span>: <span class="hljs-string">".swiper-pagination"</span>, <span class="hljs-attr">clickable</span>: <span class="hljs-literal">true</span>, }, }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span> <!-- Подключаем библиотеку слайдера --> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"</span>/></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span></code><br /><br /><br /> <code class="language-css hljs" data-highlighted="yes"><style> <span class="hljs-comment">/*Настраиваем стиль кнопок влево — вправо*/</span> <span class="hljs-selector-class">.swiper-button-next</span>, <span class="hljs-selector-class">.swiper-button-prev</span>{ <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--swiper-navigation-color,<span class="hljs-number">#fff</span>); <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ddb9e99c</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>; } <span class="hljs-selector-class">.swiper-button-next</span><span class="hljs-selector-pseudo">:hover</span>, <span class="hljs-selector-class">.swiper-button-prev</span><span class="hljs-selector-pseudo">:hover</span>{ <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffffb8</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#ddb9e9</span>; } <span class="hljs-selector-class">.swiper-button-next</span><span class="hljs-selector-pseudo">::after</span>, <span class="hljs-selector-class">.swiper-button-prev</span><span class="hljs-selector-pseudo">::after</span>{ <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2em</span>; } <span class="hljs-comment">/*Настраиваем стиль для буллетов*/</span> <span class="hljs-selector-class">.swiper-pagination-bullet-active</span> { <span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--swiper-pagination-color,<span class="hljs-number">#779124</span>); } <span class="hljs-selector-class">.swiper-pagination-bullet</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">20px</span>;<span class="hljs-attribute">height</span>:<span class="hljs-number">20px</span>;} <span class="hljs-comment">/*Настраиваем габариты слайдера для экранов: компьютер, планшет + скругляем углы, т.к. дизайн слайда у меня круглый border-radius: 26px;*/</span> <span class="hljs-selector-class">.mySwiper1</span>{ <span class="hljs-attribute">max-width</span>:<span class="hljs-number">820px</span>; <span class="hljs-attribute">width</span>:<span class="hljs-number">820px</span>; <span class="hljs-attribute">height</span>:<span class="hljs-number">300px</span>; <span class="hljs-attribute">max-height</span>:<span class="hljs-number">300px</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">26px</span>; } <span class="hljs-comment">/*Настраиваем габариты слайдера для экрана: телефон*/</span> <span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>:<span class="hljs-number">480px</span>){ <span class="hljs-selector-class">.mySwiper1</span>{ <span class="hljs-attribute">max-width</span>:<span class="hljs-number">300px</span>; <span class="hljs-attribute">width</span>:<span class="hljs-number">300px</span>; } } </style></code>
Юлия
21.01.26
Технологии / JavaScript,Ajax,HTML
0 ответов
html
css
javascript
Ответов пока нет
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Похожие вопросы
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store

Сервис LiveExpert.org (18+) содержит информацию только для совершеннолетних 18+ и может использоваться в информационно-развлекательных целях. Используя Сервис LiveExpert.org, вы принимаете Пользовательское соглашение, Политику конфиденциальности и Политику cookie.

Эксперты Сервиса LiveExpert.org не являются членами команды Сервиса или его представителями. LiveExpert.org проверяет Экспертов и даёт допуск к работе через Сервис, однако не несёт ответственности за обещания и утверждения, указанные на страницах Экспертов и в отзывах других Пользователей об Экспертах Сервиса. LiveExpert.org не гарантирует, что информация, полученная на консультации, приведёт к ожидаемым целям и результату.

Любые консультации Экспертов или ответы на вопросы, содержащиеся в категории вопросов «Медицина» (а также и в других категориях) ни при каких условиях не являются рекламой или оказанием медицинских услуг. Сервис LiveExpert.org не несет ответственность за назначенные Экспертом препараты и рекомендует обращаться в соответствующее лечебное учреждение или к лечащему врачу для согласования возможных рисков от приема рекомендованных экспертами препаратов. Пользователь Сайта, принимая решение следовать рекомендациям Эксперта, берет на себя ответственность за возможные последствия.
Мы используем файлы cookie. Пользуясь сайтом, вы принимаете условия нашего соглашения. Принять Детальнее