Как создать слайдер для миниатюр Woocommerce ⇐ Jquery

[Гость]

Я хочу сделать слайдер для миниатюр

Ссылку оставляю для примера:

http://flexslider.woothemes.com/thumbnail-slider.html

Я много искал, но не нашел решения. Кто-нибудь может помочь?

Это источник моей страницы

Ссылка на страницу одного продукта

Следуя моему коду: functions.php

add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options'); функция ud_update_woo_flexslider_options($options) { // показываем стрелки $options['directionNav'] = true; $options['controlNav'] = wp_is_mobile() ? true: «миниатюры»; вернуть $опции; } CSS

.woocommerce div.product div.images .flex-control-thumbs li { отступ: 5 пикселей 5 пикселей 0 0; -webkit-box-sizing: граница-коробка; размер коробки: граница-коробка; -webkit-box-flex: 1; -ms-flex: 1 0 25%; гибкость: 1 0 25%; } .woocommerce div.product div.images .flex-control-thumbs { дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: гибкий; переполнение: авто; } ul.flex-direction-nav { позиция: абсолютная; верх: 40%; z-индекс: 99999; ширина: 100%; слева: 0; маржа: 0; отступ: 0 пикселей; стиль списка: нет; } li.flex-nav-prev {float: влево;} li.flex-nav-next {float: вправо;} a.flex-prev {видимость:скрытый;} a.flex-next::after { видимость:видимый;содержимое: '\f054'; семейство шрифтов: «Шрифт Awesome 5 бесплатно»; поле справа: 10 пикселей; размер шрифта: 20 пикселей; начертание шрифта: жирный; } a.flex-prev::before { видимость:видимый; содержимое: '\f053'; семейство шрифтов: «Шрифт Awesome 5 бесплатно»; поле слева: 10 пикселей; размер шрифта: 20 пикселей; начертание шрифта: жирный; } .flex-direction-nav а{ непрозрачность:1!важно; высота: 50 пикселей! важно; позиция: вернуться! важно; }