Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2024, 17:13
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Настройки плагина
Может кто сталкивался или кто поможет настроить вот этот слайдер

FLEXSLIDER.WOOTHEMES

http://flexslider.woothemes.com/

Мне нужно что бы работало два и более слайдера независимо друг от друга.
В дефолтных настройка на страницах нормально работает только один слайдер если ставишь еще один все ломается.

И там есть основной код и настраивается как я понял небольшим кодом.
Изображения:
Тип файла: jpg Скриншот 15-07-2024 191313.jpg (13.8 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2024, 17:38
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Вот такое нашел в поиске, но либо не то либо я понять не могу как заставить его работать

https://stackoverflow.com/questions/...or-two-sliders

и я головой понимаю что нужно написать что типа

document.querySelectorAll('.flexslider').forEach



И все, но как я не понимаю
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2024, 17:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сергей Ракипов, по вашей ссылке на stack overflow же есть ответ на ваш вопрос.
Просто назначьте каждому отдельному слайдеру свой класс и инициализируйте их отдельно, либо как в примере с SO - каждому слайдеру свой id, по которому и происходит выборка и инициализация слайдера.
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2024, 08:24
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Сообщение от Nexus Посмотреть сообщение
Сергей Ракипов, по вашей ссылке на stack overflow же есть ответ на ваш вопрос.
Просто назначьте каждому отдельному слайдеру свой класс и инициализируйте их отдельно, либо как в примере с SO - каждому слайдеру свой id, по которому и происходит выборка и инициализация слайдера.
Я вот сейчас злюсь, не чего там не работает, я думаю что люди отдали голоса просто так, потому что подумали что это работает. Я все перепробовал.

Какой конкретно ответ? Какой SO ?
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2024, 10:40
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 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>
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2024, 13:06
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Nexus,
Он у вас работает, даже айди эти не нужны.

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

http://flexslider.woothemes.com/basi...ction-nav.html

Prev и Next

не работают и появляются вот эти стрелки на картинки
Изображения:
Тип файла: jpg Скриншот 16-07-2024 150511.jpg (27.8 Кб, 2 просмотров)
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2024, 13:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2024, 13:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Nexus,
Да именно!!!
Скажите, а каким богам вы молитесь что бы так уметь? )))

Спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2024, 15:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Сергей Ракипов
а каким богам вы молитесь что бы так уметь?
Для тех, кто не изучал науки - весь мир наполнен магией... (с)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно копировать настройки из таба в таб? Was-Ja Элементы интерфейса 2 09.03.2021 21:04
Грид и его настройки maksym_t ExtJS 4 09.06.2015 17:08
setInterval внутри плагина giv13 Элементы интерфейса 16 16.10.2014 04:58
public метод для плагина Ichigeki jQuery 1 16.02.2012 19:07
Внутреннее состояние плагина alexander2 jQuery 10 01.04.2010 12:55