Hello! I added a product slider to my Shopify product page and I wanted to make it auto rotate instead of manually rotating when the page is visited. Is there some code I can add to make this happen?
URL: https://marianascreations.com/collections/all
Thanks in advance for your help!
Hi @EChhetri ,
You can check to see if it has that option in Online store > Themes > Customize > Collections > Default collection, click on that product slider section, pre-check Auto-rotate slides option if it exists, click Save button example like this image below
No, I don’t see that option. I found code to add the slider feature since it wasn’t on the Dawn theme. Now I want to make it auto rotate. Thanks for the help, though!
Could you share that code here?
.dawn-product-slider {
text-align: center;
max-width: 1600px;
margin: auto;
padding: 0 20px;
padding-bottom: 32px;
margin-top: 55px;
}
.dawn-product-slider img {
width: 100%;
}
.dawn-product-slider .carousel-cell {
background: #fff;
border-radius: 16px;
margin: auto;
padding: 18px;
margin: 12px;
width: calc(32% - 10px);
}
.product-btn {
width: 100%;
}
.dawn-product-slider a {
color: black;
text-decoration: none;
}
.dawn-product-slider a .title:hover {
text-decoration: underline;
}
.dawn-product-slider a .title, .dawn-product-slider a .price {
margin: 0px;
}
.dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
.dawn-product-slider .flickity-button.flickity-prev-next-button.next {
background: #513C2D;
color: white;
}
.dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
outline: unset;
outline-offset: unset;
box-shadow: unset;
}
@media only screen and ( max-width: 767px ) {
.dawn-product-slider .carousel-cell {
width: calc(50% - 10px);
}
}
@media only screen and ( max-width: 479px ) {
.dawn-product-slider .carousel-cell {
width: calc(100% - 10px);
}
}
{{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.dawn-product-slider .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.dawn-product-slider .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.dawn-product-slider .carousel-cell {
width: calc(24% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Products slider",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "text",
"id": "title",
"default": "Products slider",
"label": "t:sections.featured-collection.settings.title.label"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "product",
"id": "product_item",
"label": "Choose the product you want to displayed"
}
]
}
] ,
"presets": [
{
"name": "Product slider",
"category":"Custom"
}
]
}
{% endschema %}
Hi @EChhetri ,
Please edit this line of code
To like this
Hope this help
Thank you for helping. It does not change anything, however. Here is the edited code:
.dawn-product-slider {
text-align: center;
max-width: 1600px;
margin: auto;
padding: 0 20px;
padding-bottom: 32px;
margin-top: 55px;
}
.dawn-product-slider img {
width: 100%;
}
.dawn-product-slider .carousel-cell {
background: #fff;
border-radius: 16px;
margin: auto;
padding: 18px;
margin: 12px;
width: calc(32% - 10px);
}
.product-btn {
width: 100%;
}
.dawn-product-slider a {
color: black;
text-decoration: none;
}
.dawn-product-slider a .title:hover {
text-decoration: underline;
}
.dawn-product-slider a .title, .dawn-product-slider a .price {
margin: 0px;
}
.dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
.dawn-product-slider .flickity-button.flickity-prev-next-button.next {
background: #513C2D;
color: white;
}
.dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
outline: unset;
outline-offset: unset;
box-shadow: unset;
}
@media only screen and ( max-width: 767px ) {
.dawn-product-slider .carousel-cell {
width: calc(50% - 10px);
}
}
@media only screen and ( max-width: 479px ) {
.dawn-product-slider .carousel-cell {
width: calc(100% - 10px);
}
}
{{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.dawn-product-slider .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.dawn-product-slider .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.dawn-product-slider .carousel-cell {
width: calc(24% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Products slider",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "text",
"id": "title",
"default": "Products slider",
"label": "t:sections.featured-collection.settings.title.label"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "product",
"id": "product_item",
"label": "Choose the product you want to displayed"
}
]
}
] ,
"presets": [
{
"name": "Product slider",
"category":"Custom"
}
]
}
{% endschema %}
I found this from here. You can check it for more detail
https://flickity.metafizzy.co/options.html#autoplay
