Перейти к публикации

Помощь в карусели bootstrap


Рекомендованные сообщения

Всем доброго дня. Возник такой вопрос, может кто сталкивался. Взял шаблон на бутстрап, там есть карусель новостей. Всю карусель я настроил, все ок (вывод делал через custom). Загвоздка в том, что у карусели есть переключатели миниатюры, при клике на который перелистывается слайд. Для этого используется атрибут data-slide-to

<div class="col-md-3 col-sm-3 col-xs-6">
    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="[xfvalue_images]" alt="" class="img-responsive"/>
        <div class="caption"><div class="description">{title limit="25"}...</div></div>
    </div>
</div>

Как можно сделать чтобы он увеличивался для каждого поста до 4? Если дадите подсказку, буду премного благодарен.

b1ff1646adb9098c0c9876cc0ae69128.png

 

Ссылка на сообщение
Поделиться на других сайтах

я так понимаю, это не весь код слайдера. Показали бы весь. Я бы использовал id новости, там по идее не обязательно 1,2,3,4, а что бы цифры совпадали

Ссылка на сообщение
Поделиться на других сайтах

я так понимаю, это не весь код слайдера. Показали бы весь. Я бы использовал id новости, там по идее не обязательно 1,2,3,4, а что бы цифры совпадали

Могу дать весь) Это вывод основного слайда

<div class="item [newscount=1]active[/newscount]">
  <div class="row">
    <div class="col-md-4 prn col-sm-4">
      <div class="caption">
        <div class="title">[full-link]{title limit="35"}...[/full-link]</div>
        <div class="info"><span class="category">{category}</span><span class="fa fa-circle"></span><span class="date-created">{date=F d, Y}</span></div>
        <div class="description">{short-story limit="160"}...</div>
      </div>
    </div>
    <div class="col-md-8 pln col-sm-8"><img src="[xfvalue_images]" alt="" class="img-responsive"/></div>
  </div>
</div>

А это миниатюра

<div class="col-md-3 col-sm-3 col-xs-6">
    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="[xfvalue_images]" alt="" class="img-responsive"/>
        <div class="caption"><div class="description">{title limit="25"}...</div></div>
    </div>
</div>

Между ними

<div class="slider-news">
  
  <div id="carousel" data-ride="carousel" class="carousel slide mbs">
    <div class="carousel-inner">
      {custom template="carouselbig" aviable="global" navigation="no" from="0" limit="4" fixed="no" order="date" sort="desc" cache="no"}
    </div>
  </div>
  
  <div class="clearfix"></div>
  
  <div id="thumbcarousel" data-interval="false" class="carousel slide">
    <div class="carousel-inner">
      
      <div class="item active">
        <div class="row man">
          {custom template="carouselsmall" aviable="global" navigation="no" from="0" limit="4" fixed="no" order="date" sort="desc" cache="no"}
        </div>
      </div>
      
    </div>
  </div>

</div>

Дело в том, что тут нет привязки к цифрам. Я по началу тож так думал, однако не смог найти. Если указать допустим data-slide-id="2" то автоматом идет переключение на 3 слайд. Я пытался указать айди новости, но эт не помогло.

Изменено пользователем Doxvill
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...