Add Swiper Snippet to featured collections (VENTURE THEME)

[SHIBdev]

Hi there, im building my new section. I want to make something with swiper and featured-collections. It seems to work, but i want to modify something.. 

Right now, it shows all collections in the same row, how can i change it, and just show one collection per row. Just like desktop view.. how can i change it to mobile view

Here is a capture from desktop view, which one its showing correctly.

Here is a capture from mobile view, you can see there it's showing all categories in the same row, and i want to show just one categorie by row

 Any code or everything its needed, just contact me, thanks a lot for anyone who can help me! 

[KetanKumar]

@SHIBdev 

yes you have try this way code

https://www.youtube.com/watch?v=7DqtFl2KaSg 

[SHIBdev]

@KetanKumar  i made it with another snippet different than video. That's called SWIPER. and i want to make it with collections, no products. 

i can send you link and password if you need it

[KetanKumar]

@SHIBdev 

yes please share us 

[SHIBdev]

@KetanKumar done by pm, thanks a lot!

[KetanKumar]

@SHIBdev 

thanks for it i will check url and let you know 

[SHIBdev]

up!! 

[KetanKumar]

@SHIBdev 

did you not see message?

[SHIBdev]

@KetanKumar sorry i send you a pm, you're not seeing the correct place at home page, its at the top page mobile view.

[KetanKumar]

yes please share code so i will update 

[SHIBdev]

@KetanKumar done, you got it by pm! thanks a lot!

[SHIBdev]

up!!

[KetanKumar]

<div id="bdr_product_faq">
  <!-- Add Pagination -->
  <div id="bdr_product_faq_pagination">
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
{% for block in section.blocks %}
    {% if block.type == "collection" %}
      
        <div class="grid grid--no-gutters" id="collection-list-grid" data-number-rows="{{ number_rows }}">
    {% assign row_number = 1 %}

    {% for block in section.blocks %}
      {% if blocks_count == 5 and forloop.index > 3 %}
        {% assign grid_item_width = 'medium-up--one-half' %}
        {% assign height = 450 %}
      {% endif %}
      {% if blocks_count > 4 and forloop.index > 3 %}
        {% assign row_number = 2 %}
      {% endif %}

      {% assign featured_collection = collections[block.settings.collection] %}
<div class="swiper-slide">
      {% include 'collection-grid-item' with stretch_collection_image: section.settings.stretch_collection_image, height: height %}
    {% endfor %}
</div>
  </div>
      
    {% endif %}
{% endfor %}
    </div>
  </div>
</div>
<script>
$(document).ready(function () {
  let titleData = [];// Obtener la matriz de títulos
{% for block in section.blocks %}
    {% if block.type == "collection" %}
  titleData.push("{{ block.settings.title }}");
    {% endif %}
{% endfor %}
  var swiper = new Swiper('#bdr_product_faq .swiper-container', {
    speed: 1000,// Tiempo de transición ms
    autoHeight: true, // altura autoadaptable
    pagination: { // Buscapersonas
      el: '#bdr_product_faq_pagination',
      bulletClass : 'bdr_swiper_pagination_bullet',
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
      },
      clickable: true
    }
  });
});
</script>

[SHIBdev]

@KetanKumar this code doesn't work, it shows everything in homepage broken 

[KetanKumar]

@SHIBdev 

some thing is wrong code 

if possible to add me staff account and give me just theme access so i will check direct theme code 

[SHIBdev]

@KetanKumar done, you got collaborator code by pm! thanks a lot!

[KetanKumar]

@SHIBdev 

great thanks let me ck

[SHIBdev]

@KetanKumar okay ill wait till tomorrow you can send me request right now if you want. Thanks a lot

[KetanKumar]

@SHIBdev 

yes i'm back to work but i can't receive any email can you try again

[SHIBdev]

@KetanKumar here you have url, https://ettore-and-gio.myshopify.com/

[SHIBdev]

uppp! 

[KetanKumar]

@SHIBdev 

i have sent please check

[SHIBdev]

@KetanKumar its done! thanks a lot sir!

[SHIBdev]

@KetanKumar did you see something sir? 

[KetanKumar]

@SHIBdev 

sorry for late reply have  i have check this code but theme doesn't proper its reburied to redevelop this section custom code 

try this code 

https://codepen.io/EllieSadler/pen/NGvrNq

[SHIBdev]

@KetanKumar thanks, but i want to use swiper, not slider. Thanks anyway.

If anyone can help me, just tell me i will send every file is needed!

[KetanKumar]

@SHIBdev 

oh i see don't requires to slider? so wait i will update swipe code if possible access agani

[SHIBdev]

@KetanKumar send me request collaborator again.. i don't know if we are in the same way to make it happen, i mean, i got it workly perfect at desktop view, but in mobile view i dont know why, all collections i used stay in the same row and there is 4xcollections and 4rows, when it will be 1 collection and 4rows (1per1).

[KetanKumar]

@SHIBdev 

yes i have sent please check and let me know 

[SHIBdev]

@KetanKumar its done sir! if you want can make it right now in live, to adjust your work!

[KetanKumar]

@SHIBdev 

yes please check this theme 

https://www.ettoreandgio.com/?fts=0&key=dc4dff0f3cb88c16e09f78ddabf9d34e9b1b0375a5084d486337edfcd9d8...

its proper so i will move code live 

[SHIBdev]

@KetanKumar i think its almost perfect sir!!! can you make collection cards with more width and height? like this picture? 

[KetanKumar]

@SHIBdev 

i have done please check

[SHIBdev]

@KetanKumar i dont know how to tell you.. thanks and thanks... its almost perfect! just to make it perfect, its possible to show images correctly i mean, it seems not centered at all, or maybe resize its not working as well, but i say you again, thanks so much sir!

[KetanKumar · Accepted solution]

yes i have update code please check

[SHIBdev]

@KetanKumar we are so close to get it working perfectly! here is desk view which one is showing correctly resize of images!

Here is mobile view, its a little bit different, i think resize is not working as well like desk view

[KetanKumar]

yes aspect ratio image not portrait it lanscp

[SHIBdev]

@KetanKumar can we make something to make it possible? i don't know what u mean with that.. anyway thanks a lot for your work!

[KetanKumar]

@SHIBdev 

it was change look asper mobile device real device look proper don't worry about it