Hello! I am trying to copy code (liquid files and css)(for a testimonial slider) from a context theme we purchased over to our current Ira theme. Both themes are made from the same developers but I have looked and looked and its not taking the styles or anything. You'll see one of them has the slider dots. It also moves and transitions.
I added the section code for the testimonial slider. I am wondering if the "js-fq testimonials__container" is the issue since I can't find it anywhere. Also when I inspect it there is an elements.style that I also cannot locate? The first image has the slider dots and transitions while the other one is what it looks like on the Ira theme with all of the files and css applied to it. Please, any help would be greatly appreciated as I cannot figure out why it's not working.
{% assign has_images = false %}
{% for block in blocks %}
{% if block.settings.icon != blank %}
{% assign has_images = true %}
{% endif %}
{% endfor %}
<section
data-section-id="{{ section.id }}"
data-section-type="{{ type }}"
class="
testimonials section
{% if has_images %}testimonials--has-images{% endif %}
{% if blocks.size < 2 %}testimonials--single{% endif %}
"
>
<div class="{% render 'section-style' with outlined: section.settings.outline %}">
<div class="testimonials__quote-mark">
{% render 'icon-quote' %}
</div>
<div class="js-fq testimonials__container">
{% for block in blocks %}
<div
class="testimonials__slide ph3 tc"
{% if block.settings.icon != blank %}
data-image="{{ block.settings.icon | img_url: '200x' }}"
{% endif %}
data-index="{{ forloop.index0 }}"
{{ block.shopify_attributes }}
>
<div class="type-heading-1 mw8 center mt3">{{ block.settings.quote }}</div>
{% if block.settings.author != blank %}
<p class="type-body-regular">{{ block.settings.author }}</p>
{% endif %}
{% if block.settings.icon != blank %}
<img
class="testimonials__icon active"
src="{{ block.settings.icon | img_url: '300x' }}"
alt="{{ block.settings.icon.alt }}"
/>
{% endif %}
</div>
{% endfor %}
</div>
<div class="testimonials__pagination">
{% for block in blocks %}
{% if block.settings.icon != blank %}
<img
data-pagination
data-index="{{ forloop.index0 }}"
class="testimonials__icon {% if forloop.index0 == 0 %}active{% endif %}"
src="{{ block.settings.icon | img_url: '300x' }}"
alt="{{ block.settings.icon.alt }}"
/>
{% endif %}
{% endfor %}
</div>
</div>
</section>
<style>
#shopify-section-{{ section.id }} .testimonials__icon {
width: 100%;
max-width: {{ icon_width }}px;
margin-left: calc({{ icon_width }}px / 5);
margin-right: calc({{ icon_width }}px / 5);
}
</style>
{% assign has_images = false %}
This is the slider I want with the dots and transitions
This is what it looks like on the ira theme with all the files and css I added in.
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
sorry for
i can't see a slider on this section can you please add testimonial slider section after checked
User | Count |
---|---|
558 | |
214 | |
129 | |
82 | |
49 |