Hello, I would like to make my slideshow in the home page similar to the one in this website (https://www.winkylux.com/) meaning the controls are visible only when the mouse is on the slideshow and you can go to the next slide buy holding the left mouse click and drag the slide onto the next one. Anyone has any idea how I can possibly do this?. I am using the taste theme
Thats a good point, but the thing im trying to do is not about the design but the fuctionality and controls of the slideshow on my homepage, regardless thank you for your respone!
Hi @FotistTsak
Can you share your website? So we can take a look on changes that you might have to do?
Of course here is the link https://orgasmo.gr/ i tried with some css commands to hide the control buttons, it worked but it was not what i was looking for. I wanted it to be like this site slideshow https://www.winkylux.com/
Hi @FotistTsak
The reference site is using slick slider so you can use the same by following the reference site structure. To hide the slick-dots. they are using CSS in their styles.css file. By default slick dots opacity is 0 and on main slider wrapper hover, they are changing opacity to 1.
CSS Reference:
.slideshow--navigation-dots:hover .slick-dots{
opacity: 1;
}
It will require some CSS and JS tricks. If you are comfortable with that then you can follow the reference site and achieve the same
Thank you!
Truth be told. i am not quite comfortable with css, so i see the inspect from the reference site and try and copy that? im kinda confused
need to update two files( please create duplicate of live theme first)
FILE 1 : Goto Sections > slideshow.liquid (paste this code)
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- if request.design_mode -%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.slideshow.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "layout",
"options": [
{
"value": "full_bleed",
"label": "t:sections.slideshow.settings.layout.options__1.label"
},
{
"value": "grid",
"label": "t:sections.slideshow.settings.layout.options__2.label"
}
],
"default": "full_bleed",
"label": "t:sections.slideshow.settings.layout.label"
},
{
"type": "select",
"id": "slide_height",
"options": [
{
"value": "adapt_image",
"label": "t:sections.slideshow.settings.slide_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.slideshow.settings.slide_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.slideshow.settings.slide_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.slideshow.settings.slide_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.slideshow.settings.slide_height.label"
},
{
"type": "select",
"id": "slider_visual",
"options": [
{
"value": "dots",
"label": "t:sections.slideshow.settings.slider_visual.options__2.label"
},
{
"value": "counter",
"label": "t:sections.slideshow.settings.slider_visual.options__1.label"
},
{
"value": "numbers",
"label": "t:sections.slideshow.settings.slider_visual.options__3.label"
}
],
"default": "counter",
"label": "t:sections.slideshow.settings.slider_visual.label"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.slideshow.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 9,
"step": 2,
"unit": "s",
"label": "t:sections.slideshow.settings.change_slides_speed.label",
"default": 5
},
{
"type": "header",
"content": "t:sections.all.animation.content"
},
{
"type": "select",
"id": "image_behavior",
"options": [
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
}
],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "checkbox",
"id": "show_text_below",
"label": "t:sections.slideshow.settings.show_text_below.label",
"default": true
},
{
"type": "header",
"content": "t:sections.slideshow.settings.accessibility.content"
},
{
"type": "text",
"id": "accessibility_info",
"label": "t:sections.slideshow.settings.accessibility.label",
"info": "t:sections.slideshow.settings.accessibility.info",
"default": "Slideshow about our brand"
}
],
"blocks": [
{
"type": "slide",
"name": "t:sections.slideshow.blocks.slide.name",
"limit": 5,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "inline_richtext",
"id": "heading",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "inline_richtext",
"id": "subheading",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
}
]
}
],
"presets": [
{
"name": "t:sections.slideshow.presets.name",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
FILE 2 : goto assets > slideshow.liquid (paste this code)
slideshow-component {
position: relative;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 989px) {
.no-js slideshow-component .slider {
padding-bottom: 3rem;
}
}
slideshow-component .slideshow.banner {
flex-direction: row;
flex-wrap: nowrap;
margin: 0;
gap: 0;
}
.slideshow__slide {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 749px) {
.slideshow--placeholder.banner--mobile-bottom.banner--adapt_image .slideshow__media,
.slideshow--placeholder.banner--adapt_image:not(.banner--mobile-bottom) {
height: 28rem;
}
}
@media screen and (min-width: 750px) {
.slideshow--placeholder.banner--adapt_image {
height: 56rem;
}
}
.slideshow__text.banner__box {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 54.5rem;
}
.slideshow__text > * {
max-width: 100%;
}
@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__text {
border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
}
.banner--mobile-bottom .slideshow__text.banner__box {
max-width: 100%;
}
.banner--mobile-bottom .slideshow__text-wrapper {
flex-grow: 1;
}
.banner--mobile-bottom .slideshow__text.banner__box {
height: 100%;
}
.banner--mobile-bottom .slideshow__text .button {
flex-grow: 0;
}
.slideshow__text.slideshow__text-mobile--left {
align-items: flex-start;
text-align: left;
}
.slideshow__text.slideshow__text-mobile--right {
align-items: flex-end;
text-align: right;
}
}
@media screen and (min-width: 750px) {
.slideshow__text.slideshow__text--left {
align-items: flex-start;
text-align: left;
}
.slideshow__text.slideshow__text--right {
align-items: flex-end;
text-align: right;
}
}
.slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper {
height: 100%;
}
@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content {
height: 100%;
padding: 5rem;
}
}
.slideshow__controls {
border: 0.1rem solid rgba(var(--color-foreground), 0.08);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.slideshow:hover + .slideshow__controls {
visibility: visible;
}
.slideshow__controls--top {
order: 2;
z-index: 10;
}
@media screen and (max-width: 749px) {
.slideshow__controls--border-radius-mobile {
border-bottom-right-radius: var(--text-boxes-radius);
border-bottom-left-radius: var(--text-boxes-radius);
}
}
.spaced-section--full-width:last-child slideshow-component:not(.page-width) .slideshow__controls {
border-bottom: none;
}
slideshow-component:not(.page-width) .slider-buttons {
border-right: 0;
border-left: 0;
}
.slideshow__control-wrapper {
display: flex;
}
.slideshow__autoplay {
position: absolute;
right: 0;
border-left: none;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__autoplay {
right: 1.5rem;
}
}
@media screen and (min-width: 750px) {
.slideshow__autoplay.slider-button {
position: static;
margin-left: 0.6rem;
padding: 0 0 0 0.6rem;
border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
}
.slideshow__autoplay .icon.icon-play,
.slideshow__autoplay .icon.icon-pause {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
width: 0.8rem;
height: 1.2rem;
}
.slideshow__autoplay .icon.icon-play {
height: 1rem;
}
.slideshow__autoplay path {
fill: rgba(var(--color-foreground), 0.75);
}
.slideshow__autoplay:hover path {
fill: rgb(var(--color-foreground));
}
@media screen and (forced-colors: active) {
.slideshow__autoplay path,
.slideshow__autoplay:hover path{
fill: CanvasText;
}
}
.slideshow__autoplay:hover svg {
transform: scale(1.1);
}
.slideshow__autoplay--paused .icon-pause,
.slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play {
visibility: hidden;
opacity: 0;
transform: scale(.8)
}
you need to do some tweaks as well as rearrange the code in two files
theme code > section > slideshow.liquid
theme code > assets > component-slideshow.liquid
note : I tried sharing two files but they have lot of content so was not able to post
Also for draggable slider, need to add one javascript script (you can also find javascript tutorial for this on google).
Let me know if you want complete solution
Pleaseprovide me with the complete solution. what tweaks i need to do exactly?
let me know if it works