Edit product slider on prestashop 1.7.6

[jazz for soul]

Hello !

I would like to change the appearance of the product slider in prestashop 1.7.6 ! Currently it looks like the base theme but I would like to customize it for something simpler, having the buttons directly on the main image, making the thumbnails disappear and with a cross to close the pop-up.

Thank you for your help !

 

 

Edited May 4, 2020 by prestacrashs (see edit history)

[Chill_user]

It depends about what you is actually searching;

I am using library for slide next image, you can see it here.

If you will use this library, here is my code below (dont forget css styles,but this code is working below):

Also check swiper api parameters, you have a lot of features here (swiping delay, animations, zoom etc.)

 replace code in /templates/catalog/_patrials/product-cover-thumbnails.tpl

<div class="swiper-container " style="width:100%">
    <div class="swiper-wrapper">
      {foreach from=$product.images item=image}
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
        <img
        src="{$image.bySize.large_default.url}"
        alt="{$image.legend}"
        style="width:100%;"
        title="{$image.legend}"
        itemprop="image">
      </div>
      </div>
      {/foreach}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    zoom: {
      maxRatio: 3,
    },
  });
</script>

P.S. if question is solved, don't forget to press grey heart

Edited May 4, 2020 by Amantha Bill (see edit history)

[jazz for soul]

I'll see what Swiper gives!

I don't know where I should put the contents of the rar file in the Prestashop folders. In the theme would be suitable? And the file I want to modify is product-images-modal.tpl however but I don't know how.

Thank you !

Edited May 5, 2020 by prestacrashs (see edit history)

[jazz for soul]

Can anyone help me ? The number of slides indicates 0/0 and the buttons do not work, which means that the images do not scroll as it should ... here is the code, thank you!

 

  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

  <script src="https://unpkg.com/swiper/js/swiper.js"></script>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

  <div class="modal fade js-product-images-modal" id="product-modal">



    <div class="swiper-container " style="width:100%">
      <div class="swiper-wrapper">
        {foreach from=$product.images item=image}
        <div class="swiper-slide">
          <div class="swiper-zoom-container">
            <img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
          </div>
        </div>
        {/foreach}
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });

    </script>




  </div><!-- /.modal -->

 

[jazz for soul]

This topic is still current, could someone please help me?

[Chill_user]

Hello, do you have some error at frontend page?

Press F12 and inspect the errors and tell me if you have ones.

If you have 0/0 images it means PS not giving you images. Check previous steps described in this post.

P.S. In my previous message I posted you my working code

Also check this: $this

Edited May 29, 2020 by Amantha Bill (see edit history)

[jazz for soul]

For reasons that I don't know, the code works now ...

Thank you very much for your help, however, thanks to you I was able to do what I wanted !

[jazz for soul]

Ah finally, the joy was short-lived and the code doesn't work too…
I already tried your code and I was wondering, are the different slides supposed to move on their own? Because if this is the case, your code does not work with me ... The F12 key does nothing at all with me, does it make sense to open the console? The messages are:
"- This page uses the non-standard property" zoom ". Consider using calc () in the values of the relevant properties or use "transform" with "transform-origin: 0 0".
- The cookie "hibext_instdsigdipv2" will soon be rejected because its attribute "sameSite" is set to "none" or an invalid value, and without attribute "secure". To learn more about the "sameSite" attribute, see https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite "

Thanks again for your help!

 

edit : I think the code only works after a while? It shows me 0/0 and then after a long time shows me 1/3.
How can I get PS to deliver images much faster?

Edited June 10, 2020 by jazz for soul (see edit history)

[jazz for soul]

This topic is still current, could someone please help me?