Slider Question - Static Header , Sliding quotes

Hello,

I am wondering if it is possible to have a static header image, but have 5 different quotes slide across the same image?

Please let me know how I can do this. Thank you!

Hi,

I think it’s better if you are using another slider plugin such as Crelly Slider because with that plugin, it’s give you more customisable.

Here is the tips to achieve your request:

  1. Install and activate the Crelly slider.
  2. Create a slider and add 5 slides
  3. Add image to each slide but remove all possibilities of animation
  4. Add your text to the each slide.
  5. Open and edit your front page and create a page builder row with HTML widget
  6. Put the Crelly slider’s shortcode to the HTML widget
  7. Deactivate the default slider of the Sydney theme from the customizer.

That’s it.

Regards,
Awan

Hi Awan,

Thank you for the help. I have a couple of more questions. For number 2 (create a slider and add 5 slides), does that mean that I set the same image as the background for all 5 slides? My goal is to have 1 picture as a background and then 5 quotes slide over the image. So my picture will remain the same.

Please let me know. Thank you very much!

Regards,

Justin

Hi Justin,

Yes, that was I want to say on point 2. Set the same image for all slides but use different quote.
So far, that was the best solutions that I have. (For no coding, of course)

Regards,
Awan

Okay thank you Awan! I will give it a try and let you know. Thanks!

Justin

Hi Awan,

So I have installed Crelly Slider and I am having a problem in the mobile/tablet view. The slider is not the full width.

Do you have any suggestions on how I can get it to be full width in the mobile view? The desktop view looks good! Thank you!

Hi,

Please add this CSS code below to customize > additional CSS

@media (max-width: 768px){
    #pl-4 .panel-grid-cell {
	padding-left: 0 !important;
	padding-right: 0 !important;
    }
    .crellyslider, .crellyslider>.cs-slides>.cs-slide {
	width: 100% !important;
    }
}

It worked! Thank you very much Awan!

1 Like

Hi Awan,

I have a question related to the crelly slider. The font is very small on the mobile viewport. Is it possible to hide it in ONLY the mobile view? Please let me know if this is possible. Thank you!

Justin

Hi,

Add this CSS code:

@media (max-width: 765px){
    .crellyslider ul li span {
        display: none;
    }
}