I am searching for a vertical slider for my product page. I tried http://codepen.io/thirdender/pen/aOYyGb but it doesn't work. Any other solution?
Magento – Add vertical slider to product page (view more images)
product-viewslider
Related Solutions
I found what was wrong, some strange peace of code in the js file, that was causing jquery not to load properly. Once I have removed the .hammer() which was located just before the function name. Everything went back to normal.
You can configure slider in view.xml file. It located in /theme_folder/etc/view.xml
. There you can write vars for gallery. For luma theme it looks like this
<vars module="Magento_Catalog">
<!-- Gallery and magnifier theme settings. Start -->
<var name="gallery">
<var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
<var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
<var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
<var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
<var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
<var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
<var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
<var name="transition">
<var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
</var>
<var name="fullscreen">
<var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
<var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
<var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
<var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical) -->
<var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
<var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
<var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
<var name="transition">
<var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
<var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
</var>
</var>
</var>
Hope this help
Best Answer
You must create the
view.xml
file on your themeapp/design/frontend/VendorPackage/Theme/etc/view.xml