Dawn Slide Component

Solved
Guy_Beardsley
Tourist
9 0 2

This works a treat! Thank you for putting this together. Very easy to follow. 

0 Likes
shadowsfall118
Excursionist
33 0 16

@made4Uo do you have a solution for a homepage slider yet that works with Dawn 2.0? Trying to work on a solution.

0 Likes
made4Uo
Trailblazer
262 10 51

Hi @shadowsfall118. Sorry. Can you explain further? Do you want a section with a product slider?

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
shadowsfall118
Excursionist
33 0 16

@made4Uo on the home page.

Screen Shot 2021-09-23 at 2.05.37 PM.png

0 Likes
shadowsfall118
Excursionist
33 0 16

@made4Uo I also noticed with your product slider the images for combinations do not re-arrange or hide with product variant selection.

Example 2 products 1 red - 1 green. When I click red variant the images for green variant are still showing 1st below. Get what I mean?

If we could hide or re-arrange the images for the variation that is not selected that would be a plus. I'm looking into this but I came from Prestashop and just learning the ropes how Shopify works.

Thanks!

0 Likes
made4Uo
Trailblazer
262 10 51

@shadowsfall118 I am not sure if I understand what you mean. Do you want a product slider in the home page? That would be creating a section carousel

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
made4Uo
Trailblazer
262 10 51

The images are being called by its data set ID. If the image share the same section ID and media ID the that would be an issue. The code below calls the the same data set ID you clicked and and added it as a first child in the container. The other children are hidden, which you should not see other images. May I inspect your website to assist you better? If your uncomfortable other people seeing your website. You can visit my website, made4uo.com and message me via "chat with us"

function newLargeImage(x) {

let clickedImage = x.dataset.thumbId;
const newImage = document.querySelector(`[data-media-id="${clickedImage}"]`);
const parentData = newImage.parentElement;
parentData.prepend(newImage);
};

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
shadowsfall118
Excursionist
33 0 16

Yes and no. I would like a slider on the home page using the same built in slider but with custom images and not product images. I tried inserting it by using custom liquid with the below code (not done):

I assume so far I'm missing the JS to make it work.

{{ 'product-slider.css' | asset_url | stylesheet_tag }}
<div class="slider-container" >
<ul class="large-image" id="large-image">
<li class="large-image-item product__media-item grid__item slider__slide">
<img src="SLIDE1-IMG-GOES-HERE">
</li>
<li class="large-image-item product__media-item grid__item slider__slide">
<img src="SLIDE2-IMG-GOES-HERE">
</li>
</ul>
<button type="button" class="slider-button slider-button--prev bigger-slider" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>

<button type="button" class="slider-button slider-button--next bigger-slider" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>

0 Likes
made4Uo
Trailblazer
262 10 51

Got it. You just need the slider-component actually and some CSS. Let me try to work on that. I was planning to do a slick carousel actually using the slider component

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
made4Uo
Trailblazer
262 10 51

Let me fix my code. I see there were issues with seeing two large images. Thank you

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes