$('.images').slick({ // это изначально slick слайдер для основного блока изображений
slidesToShow: 1, // по одному слайдеру
slidesToScroll: 1, // по одному менять
arrows:true, // включение стрелок (если не нужны false)
asNavFor: '.imagesnew_dotted' // указываем что навигация для слайдера будет отдельно (указываем класс куда вешаем навигацию)
});
$('.imagesnew_dotted').slick({ // настройка навигации
slidesToShow: 3, // указываем что нужно показывать 3 навигационных изображения
asNavFor: '.images', // указываем что это навигация для блока выше
focusOnSelect: true // указываем что бы слайделось по клику
});<!-- Собственно блок где будут основные изображения -->
<div class="images">
<div><img src="image/data/big_img_1.jpg" alt=""></div>
<div><img src="image/data/big_img_2.jpg" alt=""></div>
<div><img src="image/data/big_img_3.jpg" alt=""></div>
</div>
<!-- Навигация для вышеупомянутого слайдера -->
<div class="imagesnew_dotted" style="transform: none !important;"> // обязательно в css запретите трансформацию, а то будут иконки ездить в зависимости от номера слайда
<img class="active" src="image/data/icon_img_1.jpg">
<img src="image/data/icon_img_2jpg">
<img src="image/data/icon_img_3.jpg">
</div>
<?php $post_type = 'product';
$product_args = array(
'taxonomy' => 'product_cat',
'hide_empty' => true,
);
$terms = get_terms( $product_args );
foreach( $terms as $term ) : ?>
<div class="title"><span><?php echo $term->name; ?></span></div>
<?php $args = array(
'post_type' => $post_type,
'posts_per_page' => -1, //show all posts
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $term->slug,
)
)
);?>
<?php $posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="catalog-all-product">
<div class="images">
<?php the_post_thumbnail(); ?>
</div>
<div class="name">
<a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
</div>
</div>
<?php endwhile; endif; ?>
<?php endforeach; ?>
<style>
.logo, .logo2 {width: 100px; height: 100px;}
.logo {background: green;}
.logo2 {background: blue;}
</style>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<script>
setInterval(function() {
var fl = document.querySelector('.logo'),
fn = fl ? 'logo' : 'logo2';
cn = fl ? 'logo2' : 'logo';
console.log(fl, fn, cn);
document.querySelectorAll('.'+fn).forEach(function(i) {
i.className = cn;
console.log(i.className);
});
}, 5000);
</script>
<use>
wordpress.org/plugins, но потом его удалили, я его использую
