Как сделать лучше фронт часть?

220

27 декабря 2021, 07:40

Ситуация такова
Есть 22 пунктов слева
Есть слайдер справа( слайдер из фотографии )
При клике на пункт, слайдер должен иметь те фото что относятся к пункту слева

Возникло 2 идеи как реализовать, подскажите, что лучше или может вы предложите что то универсальное

Это внутри пунктов сделать скрытые изображения, при клике на него собираем их через JS , удаляем старый слайдер и создаем новый слайдер из тех фото что есть
Делать 22 слайдера, и скрыть, при клике показывать и инициаилизировать ( инициализируется лишь один, так как классы везде одни и те же)

Меня именно интересует Front End часть, поэтому про идеи вывода ajaxoм из Базы данных, прошу не советовать

Answer 1

Если слайдер переинициализировать не слишком часто, то это вполне приемлемо (учитывая малое кол-во элементов, 22).

const list = document.querySelector('#list'),  
      slider = document.querySelector('#slider');  
let siema;  
for (let i = 0; i < 22; ++i) { 
  const src = `https://picsum.photos/id/${100 + i}/500/300/`;  
  list.insertAdjacentHTML('beforeend', ` 
    <li data-src="${src}" data-checked="0">Image ${i}</li> 
  `.trim());  
} 
document.body.addEventListener('click', ({ target }) => { 
  if (target.matches('#list li')) { 
    target.dataset.checked = +!(+target.dataset.checked);  
    updateSlider();  
  } else if (target.matches('.nav') && siema) { 
    siema[target.id]();  
  } 
});  
 
function updateSlider() { 
  siema && siema.destroy();  
  slider.innerHTML = '';  
  for (const el of list.querySelectorAll('#list [data-checked="1"]')) { 
    slider.insertAdjacentHTML('beforeend', ` 
      <div><img src="${el.dataset.src}"></div> 
    `.trim());  
  } 
  siema = new Siema({ loop: true });  
}

html, body, #list { height: 100%; margin: 0; padding: 0; } 
body { background: #444; font-family: sans-serif; } 
 
section, #list { height: 100%; overflow-y: hidden; } 
 
section { display: flex; flex-flow: row nowrap; align-items: stretch; } 
  #list { 
    flex: 0 0 130px;  
    list-style: none;  
    overflow-y: scroll;  
    border-right: 1px solid #aaa; } 
 
    #list > li { padding: 1rem; color: #ccc; } 
    #list > li[data-checked="1"] { color: #aff; } 
    #list > li[data-checked="1"]::before { content: '️✔ '; display: inline; } 
 
  #slider { flex: 1 1 auto; align-self: center; margin: 0 auto; text-align: center; } 
    #slider img { max-width: 100%; max-height: 100%; } 
 
  .nav { 
    flex: 0 0 auto; align-self: center;  
    margin: 0 1rem; padding: 0.25rem;  
    background: #aaa;  
    cursor: pointer; }

<script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js"></script> 
 
<section> 
  <ul id="list"></ul> 
  <span id="prev" class="nav">◀</span> 
  <div id="slider" class="siema"></div> 
  <span id="next" class="nav">▶</span> 
</section>

Если хочется обойтись без переинициализации (для экономии ресурсов и сохранения состояния прокрутки) - то очевидно, нужно искать/создавать слайдер с возможностью обновления при добавлении и удалении слайдов. Не все готовые решения это поддерживают.