2

I want to disable product image slider on product detail page, only in desktop and tablet view. also all product images visible in same.

other all images functionality must work like images open in full screen.

Display All images vertically at the same time. show all images one by one in vertical order.

Note: Only disable slider which is displayed only one product image.

  • This is pure css.. It does not have any relation with magento – Asish Hira May 5 '16 at 13:44
  • In Magento product images use fotorama.js and structure generated by js then how we can manage images structure by css ? please check first. – Suresh Chikani May 5 '16 at 13:48
3

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

  • Yes i know already but how can disable slider and show all image same ? – Suresh Chikani May 5 '16 at 14:08
  • You can try set all options to "false" or override Magento_Catalog/product/view/gallery.phtml template and manually display images. You can use method getGalleryImages for getting all images – Ігор Климчук May 5 '16 at 14:16
  • Yes i have idea for the display manually but if display it manually then other images related functionality does not work like image on click, all images open with full screen etc. – Suresh Chikani May 5 '16 at 14:24
  • For those wanting to remove the magnifier you can do so with: <var name="magnifier"> ... <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> ... </var> – Stevie G Nov 16 '16 at 13:15
  • I couldn't find such such lines in vendor\magento\module-catalog\etc\view.xml ... Could u please tell the correct path for this view.xml – aravind Dec 2 '17 at 11:32

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.