Создание вертикального миниатюры с 3 изображениями на дисплее

Question

Мне нужна помощь по созданию вертикального миниатюры с тремя изображениями на дисплее с превью. и следующие кнопки для отображения других изображений. Эти изображения зацикливаются из базы данных. Изображение ниже - это предварительный просмотр того, что я хотел бы иметь. Например, у меня есть 5 изображений, на моей странице должно отображаться 1-е и 3-е изображения. Затем, нажав следующую кнопку, он должен скрыть 1-е изображение и отобразить только 2-е, 3-е и 4-е изображения. Любая помощь будет оценена по достоинству.

до сих пор, это то, что я достиг.

Я просто скрыть дополнительные изображения с помощью CSS "переполнение: скрытый". Я не знаю, как добавить предыдущие и следующие кнопки, чтобы поднять их.

Это некоторые из моих кодов:

  {foreach from=$images item=i name=images} 
      {if $smarty.foreach.images.iteration <= 16 } 
       <div class="thumbnail col-md-12 col-sm-12 col-xs-12"><a href="{$i.image_url|amp}" thumb="{$i.image_url|amp}" data-fancybox-group="gallery" class="fancybox" {if $smarty.foreach.images.iteration eq 1} id="first_icon"{/if} onclick="return {if $config.Detailed_Product_Images.is_jqzoom eq 'Y'}false{else}dicon_click({$smarty.foreach.images.iteration}, '{$config.Detailed_Product_Images.det_slideshow_delay}', '{$images_counter}');{/if}" {if $config.Detailed_Product_Images.is_rollover eq 'Y'} onmouseover="func_mouse_over(this, {$i.thbn_image_x}, {$i.thbn_image_y});"{/if} target="_blank"> 
      <img src="{$i.image_url|amp}" alt="" > 
       </a></div> 
      {/if} 
     {/foreach} 

Эта часть предназначена для отображения только эскиз. Не обращайте внимания на часть href.

Answer 1

Вот обновленный ответ. Это немного сложно, так как вы должны возиться с DOM, чтобы заставить изображения прокручиваться по карусели. То, что это делает, получает миниатюрные изображения и показывает первые три, а скрывает остальных.

Затем при каждом нажатии следующей кнопки он удаляет первое изображение из DOM и захлопывает его в конце списка, а затем отображает первые три изображения, скрывая остальные.

Итак, вам действительно не нужен массив, но у вас есть такая же идея: возьмите первое, положите его на конец, затем покажите первые три и скройте все остальное.

EDIT: Я понял, что нам не нужно использовать JavaScript для отображения/скрытия элементов, это намного проще с CSS. Просто удалите первого ребенка, добавьте его до конца и дайте CSS отобразить первые 3 ребенка.

var thumbs = document.querySelector('.thumbs'); 
 
var next = document.querySelector('button'); 
 

 
next.addEventListener('click', function() { 
 
\t var child = thumbs.removeChild(thumbs.firstElementChild); 
 
    thumbs.appendChild(child); 
 
});

.thumb { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    margin: 10px; 
 
    display: none; 
 
} 
 

 
.thumb:nth-child(-n+3) { 
 
    display: block; 
 
}

<div class="thumbs"> 
 
    <div class="thumb"> 
 
    img 1 
 
    </div> 
 
    <div class="thumb"> 
 
    img 2 
 
    </div> 
 
    <div class="thumb"> 
 
    img 3 
 
    </div> 
 
    <div class="thumb"> 
 
    img 4 
 
    </div> 
 
    <div class="thumb"> 
 
    img 5 
 
    </div> 
 
</div> 
 
<button> 
 
    Next 
 
</button>

Вот пример галереи изображений, который был использован для ответа на другой вопрос, но вы можете видеть эту идею с помощью кнопки «Next».

https://jsfiddle.net/subterrane/bb196sts/

button.addEventListener('click', function() { 
    for (var ix = 0; ix < images.length; ix++) { 
    images[ix].style.display = 'none'; 
    } 

    index++; 
    if (index >= images.length) index = 0; 
    images[index].style.display = 'block'; 
}); 

Вы добавляете обработчик событий к кнопке (ы) и показать/скрыть изображения надлежащим образом.