|
15.07.2024, 17:13
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Настройки плагина
Может кто сталкивался или кто поможет настроить вот этот слайдер
FLEXSLIDER.WOOTHEMES
http://flexslider.woothemes.com/
Мне нужно что бы работало два и более слайдера независимо друг от друга.
В дефолтных настройка на страницах нормально работает только один слайдер если ставишь еще один все ломается.
И там есть основной код и настраивается как я понял небольшим кодом.
|
|
15.07.2024, 17:38
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Вот такое нашел в поиске, но либо не то либо я понять не могу как заставить его работать
https://stackoverflow.com/questions/...or-two-sliders
и я головой понимаю что нужно написать что типа
document.querySelectorAll('.flexslider').forEach
И все, но как я не понимаю
|
|
15.07.2024, 17:44
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
Сергей Ракипов, по вашей ссылке на stack overflow же есть ответ на ваш вопрос.
Просто назначьте каждому отдельному слайдеру свой класс и инициализируйте их отдельно, либо как в примере с SO - каждому слайдеру свой id, по которому и происходит выборка и инициализация слайдера.
|
|
16.07.2024, 08:24
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Сообщение от Nexus
|
Сергей Ракипов, по вашей ссылке на stack overflow же есть ответ на ваш вопрос.
Просто назначьте каждому отдельному слайдеру свой класс и инициализируйте их отдельно, либо как в примере с SO - каждому слайдеру свой id, по которому и происходит выборка и инициализация слайдера.
|
Я вот сейчас злюсь, не чего там не работает, я думаю что люди отдали голоса просто так, потому что подумали что это работает. Я все перепробовал.
Какой конкретно ответ? Какой SO ?
|
|
16.07.2024, 10:40
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
А разве так не работает?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
<style>img {max-height: 100px}</style>
<script>
$(() => {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="image1.jpg" alt="img-1"/>
</li>
<li>
<img src="image2.jpg" alt="img-2"/>
</li>
<li>
<img src="image3.jpg" alt="img-3"/>
</li>
<li>
<img src="image4.jpg" alt="img-4"/>
</li>
</ul>
</div>
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li>
<p>Text 1</p>
</li>
<li>
<p>Text 2</p>
</li>
<li>
<p>Text 3</p>
</li>
<li>
<p>Text 4</p>
</li>
</ul>
</div>
|
|
16.07.2024, 13:06
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Nexus,
Он у вас работает, даже айди эти не нужны.
И я ссылку чуть чуть не корректную дал.
Там да они могут управляться, но они управляется не теми стрелками
http://flexslider.woothemes.com/basi...ction-nav.html
Prev и Next
не работают и появляются вот эти стрелки на картинки
|
|
16.07.2024, 13:26
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
Сергей Ракипов, так должно быть?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
<style>
img {max-height: 100px}
.slider {position: relative}
.flex-control-nav {bottom: 0}
</style>
<script>
$(() => {
$('.slider').each((i, node) => {
$(node).find('.flexslider').flexslider({
animation: "slide",
controlsContainer: $(node).find(".custom-controls-container"),
customDirectionNav: $(node).find(".custom-navigation a"),
})
});
});
</script>
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="image1.jpg" alt="img-1" />
</li>
<li>
<img src="image2.jpg" alt="img-2" />
</li>
<li>
<img src="image3.jpg" alt="img-3" />
</li>
<li>
<img src="image4.jpg" alt="img-4" />
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>
</div>
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<p>Text 1</p>
</li>
<li>
<p>Text 2</p>
</li>
<li>
<p>Text 3</p>
</li>
<li>
<p>Text 4</p>
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>
</div>
Последний раз редактировалось Nexus, 16.07.2024 в 13:30.
|
|
16.07.2024, 13:28
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Nexus,
Да именно!!!
Скажите, а каким богам вы молитесь что бы так уметь? )))
Спасибо
|
|
16.07.2024, 15:18
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Сергей Ракипов
|
а каким богам вы молитесь что бы так уметь?
|
Для тех, кто не изучал науки - весь мир наполнен магией... (с)
|
|
|
|