Adding an image/gallery slideshow with animation like in the given sample

Site URL: https://www.sherriedickinson.com

I'm trying to re-create the slideshow animation the homepage below has with no luck. Can anyone help, please? Thank you!

https://outset-la.com

Hello,

On 7.1, adding a slideshow in the way that you are talking about and shown in the example above is not possible. The slideshow options are limited to specific pages instead of blocks unfortunately.

However, 7.0 templates support these Gallery/Slideshow blocks.

If you are using 7.1, you'll need to use custom code. You can build a slideshow using a Javascript library or it is also possible to build a simple slideshow using CSS.

17 hours ago, Wolfsilon said:

Hello,

On 7.1, adding a slideshow in the way that you are talking about and shown in the example above is not possible. The slideshow options are limited to specific pages instead of blocks unfortunately.

However, 7.0 templates support these Gallery/Slideshow blocks.

If you are using 7.1, you'll need to use custom code. You can build a slideshow using a Javascript library or it is also possible to build a simple slideshow using CSS.

 

Hi! Yes, I'm on 7.1, and had thought that CSS might be the only answer. Do you know of any resources for it? Thanks!

5 minutes ago, louieandthird said:

Hi! Yes, I'm on 7.1, and had thought that CSS might be the only answer. Do you know of any resources for it? Thanks!

Add  a slideshow on top of the page, we'll see how to edit it using css

3 hours ago, bangank36 said:

Add  a slideshow on top of the page, we'll see how to edit it using css

Here you go – thanks!

https://www.sherriedickinson.com

PW: sdsite

6 hours ago, louieandthird said:

Here you go – thanks!

https://www.sherriedickinson.com

PW: sdsite

try

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

10 minutes ago, bangank36 said:

try

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

@bangank36 Thank you so much for the code! How can I make the slideshow bleed through the site header as well? Just like the site below.

https://outset-la.com

19 minutes ago, louieandthird said:

@bangank36 Thank you so much for the code! How can I make the slideshow bleed through the site header as well? Just like the site below.

https://outset-la.com

try 

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
  padding-top: 0 !important;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

1 hour ago, bangank36 said:

try 

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
  padding-top: 0 !important;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

Thank you so much @bangank36!! 

@bangank36, I'm sorry as I actually have one more question. How can I make the mobile site title font to be the same font as the desktop version? Thanks a bunch!

@bangank36

This is awesome! Learned something new today! How could you use something like this on a page with other sections that don't need to be placed next to each other? Say, if I wanted to add a section underneath the slideshow and text? Because adding a section with this code would place the next section to the right of the text. 

@louieandthird Do you still need help?

Also, do you need fix these? We will help

Site URL: https://www.sherriedickinson.com/

1. (Mobile – Footer) make footer links to 2 columns

2. (Mobile/Tablet – homepage) Image don’t show in full size

3. (Tablet – Footer) Make “© Sherrie Dickinson 2021” in the same line

4. (Tablet/Mobile – About)  Image disappear.

https://www.sherriedickinson.com/about

5. (Mobile/Tablet – Portfolio > Content creation) Image don’t show in full size, want to resize image? Increase text width and reduce space above/below text?

https://www.sherriedickinson.com/creatives

On 7/11/2021 at 7:32 AM, tuanphan said:

@louieandthird Do you still need help?

Also, do you need fix these? We will help

Site URL: https://www.sherriedickinson.com/

1. (Mobile – Footer) make footer links to 2 columns

 

2. (Mobile/Tablet – homepage) Image don’t show in full size

 

3. (Tablet – Footer) Make “© Sherrie Dickinson 2021” in the same line

 

4. (Tablet/Mobile – About)  Image disappear.

https://www.sherriedickinson.com/about

5. (Mobile/Tablet – Portfolio > Content creation) Image don’t show in full size, want to resize image? Increase text width and reduce space above/below text?

https://www.sherriedickinson.com/creatives

@tuanphan oh, wow! I didn't realize all of those issues before. Yes, please help if it's no trouble! Thank you so much!!

11 hours ago, louieandthird said:

@tuanphan oh, wow! I didn't realize all of those issues before. Yes, please help if it's no trouble! Thank you so much!!

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

8 hours ago, tuanphan said:

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

 

Yes, let's stack them, please!

19 hours ago, louieandthird said:

Yes, let's stack them, please!

Add to Design  >Custom CSS

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

3 hours ago, tuanphan said:

Add to Design  >Custom CSS

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

This code is giving this preview?

17 hours ago, louieandthird said:

This code is giving this preview?

Missing 1 code. Try this new code

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"], #collection-606c538c686fde5fa29b74d3 article.sections section {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

On 7/16/2021 at 12:31 AM, tuanphan said:

Missing 1 code. Try this new code

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"], #collection-606c538c686fde5fa29b74d3 article.sections section {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

Thank you!!

On 7/14/2021 at 12:48 AM, tuanphan said:

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

 

The footer code to make 2 columns on mobile is no longer working.. 😕

16 hours ago, louieandthird said:

The footer code to make 2 columns on mobile is no longer working.. 😕

Use new code

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3 {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

14 hours ago, tuanphan said:

Use new code

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3 {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Thank you!! 

8 hours ago, louieandthird said:

Thank you!! 

Q3. 4. It looks like you fixed. Do you need help with Q5?

21 hours ago, tuanphan said:

Q3. 4. It looks like you fixed. Do you need help with Q5?

Yes to Q5, please! Also, for Q4 I'd actually like the overlapping images to look the same on mobile view as it does on desktop view. I haven't found anything yet to help with that.

On 7/23/2021 at 12:26 PM, louieandthird said:

Yes to Q5, please! Also, for Q4 I'd actually like the overlapping images to look the same on mobile view as it does on desktop view. I haven't found anything yet to help with that.

Q5. Add to Design > Custom CSS

/* Reel responsive */
@media screen and (max-width:991px) {
.gallery-reel {
    height: 35vh !important;
}
}

Q4. If overlap on mobile, text/image will be very small.

 I think stacked is better. Also do you want to move image to above text?