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?

  • can you used the owl.carousel.js – Ajay Patel Apr 15 '16 at 15:59

You must create the view.xml file on your theme app/design/frontend/VendorPackage/Theme/etc/view.xml

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <vars module="Magento_Catalog">
        <var name="gallery">
            <var name="navdir">vertical</var>
| improve this answer | |

Hope this code can help you


I'm using jssor-slider


    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:600px;height:300px;overflow:hidden;visibility:hidden;">
            <!-- Loading Screen -->
            <div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
            <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:600px;height:300px;overflow:hidden;">
                    <img data-u="image" src="http://placehold.it/600x300/ff9500/ffffff?text=Slide%200" />
                    <img data-u="image" src="http://placehold.it/600x300/ff9500/ffffff?text=Slide%201" />
                    <img data-u="image" src="http://placehold.it/600x300/ff9500/ffffff?text=Slide%202" />
                    <img data-u="image" src="http://placehold.it/600x300/ff9500/ffffff?text=Slide%203" />
            <!-- Arrow Navigator -->
            <span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
            <span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>


.jssora08l, .jssora08r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50px;
            height: 50px;
            cursor: pointer;
            background: url('http://www.jssor.com/theme/img/a08.png') no-repeat;
            overflow: hidden;
            opacity: .4;
            filter: alpha(opacity=40);
        .jssora08l { background-position: -5px -35px; }
        .jssora08r { background-position: -65px -35px; }
        .jssora08l:hover { background-position: -5px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora08r:hover { background-position: -65px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora08l.jssora08ldn { background-position: -5px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora08r.jssora08rdn { background-position: -65px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora08l.jssora08lds { background-position: -5px -35px; opacity: .3; pointer-events: none; }
        .jssora08r.jssora08rds { background-position: -65px -35px; opacity: .3; pointer-events: none; }

  font-family:'Open Sans',sans-serif,arial,helvetica,verdana;

JS :

    var jssor_1_options = {
      $AutoPlay: false,
      $DragOrientation: 2,
      $PlayOrientation: 2,
      $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$

    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

    /*responsive code begin*/
    /*you can remove responsive code if you don't want the slider scales while window resizing*/
    function ScaleSlider() {
        var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
        if (refSize) {
            refSize = Math.min(refSize, 600);
        else {
            window.setTimeout(ScaleSlider, 30);
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    /*responsive code end*/
| improve this answer | |

Go to the the file


We can see a variable navdir.

This variable has ability to change the thumbnails alignment in Fotorama.

By default it is set as:

<var name="navdir"> horizontal</var>

Change the code like this:

<var name="navdir"> vertical</var>

to make the thumbnails as vertical.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.