/* Вкладки */
.nav-tabs {
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.nav-tabs > li > a {
    color: #555;
    background-color: #f5f5f5;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: #fff;
    background-color: #ff6600;
    border-color: #ff6600;
}

.tab-content {
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
}

Мини фото
/* Стили для контейнера с миниатюрами */
.list_product_image_thumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* Контейнер для прокрутки */
.thumb-track-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    -ms-overflow-style: none;
    scrollbar-width: thin;
}

/* Дорожка с картинками */
.thumb-track {
    display: flex;
    gap: 10px;
    width: max-content;
}

/* Кнопки навигации */
.thumb-prev, .thumb-next {
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
}
.thumb-prev:hover, .thumb-next:hover {
    background-color: #555;
}

/* Стиль активной миниатюры */
.jshop_img_thumb.active-thumb {
    border: 2px solid #ff6600;
    opacity: 0.8;
}


/* Контейнер всей галереи */
.list_product_image_thumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}

/* Контейнер с прокруткой */
.thumb-track-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Скрываем скроллбар в Chrome/Safari */
.thumb-track-container::-webkit-scrollbar {
    height: 6px;
}
.thumb-track-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Дорожка с картинками */
.thumb-track {
    display: flex;
    gap: 10px;
    width: max-content;
}

/* Стили миниатюр */
.jshop_img_thumb {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}
.jshop_img_thumb:hover {
    border-color: #ff6600;
}

/* Кнопки-стрелки */
.thumb-prev, .thumb-next {
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
    transition: 0.2s;
}
.thumb-prev:hover, .thumb-next:hover {
    background-color: #ff6600;
}





javascript
document.addEventListener('DOMContentLoaded', function() {
    var prevBtn = document.getElementById('thumbPrevBtn');
    var nextBtn = document.getElementById('thumbNextBtn');
    var container = document.getElementById('thumbContainer');
    
    if (!prevBtn || !nextBtn || !container) {
        console.log('Элементы не найдены');
        return;
    }
    
    prevBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        container.scrollBy({ left: -150, behavior: 'smooth' });
    });
    
    nextBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        container.scrollBy({ left: 150, behavior: 'smooth' });
    });
});


javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Находим кнопки по ID
    var prevBtn = document.getElementById('thumbPrevBtn');
    var nextBtn = document.getElementById('thumbNextBtn');
    
    // Находим контейнер с миниатюрами
    var container = document.querySelector('.thumb-track-container');
    
    if (prevBtn && nextBtn && container) {
        prevBtn.addEventListener('click', function(e) {
            e.preventDefault();  // Останавливаем отправку формы
            container.scrollBy({ left: -150, behavior: 'smooth' });
        });
        
        nextBtn.addEventListener('click', function(e) {
            e.preventDefault();
            container.scrollBy({ left: 150, behavior: 'smooth' });
        });
    } else {
        console.log('Стрелки или контейнер не найдены');
    }
});
</script>