(Squarespace) How to change Portfolio (Hover Background) to Slideshow on Mobile

[tuanphan]

To change Portfolio (Hover Background)

To Slideshow on Mobile.

#1. First, edit Portfolio Page > Click Add Section

#2. Choose People > Choose section with (i) icon.

#3. Hover on top right of Section > Click Edit Content

#4. Enable these options only (Title, Image)

#5. Choose Banner Slideshow

#6. Next, find ID of Hover Background section & People Banner Slideshow Section

Hover Background

Banner Slideshow

#7. Use this code to Portfolio Page Header Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Get portfolio items
    var portfolioItems = $('.portfolio-hover-item');
    
    // Get slideshow container
    var slidesContainer = $('.slides');
    
    // Clear existing slides except the first one (use as template)
    var slideTemplate = slidesContainer.find('.slide').first().clone();
    slidesContainer.empty();
    
    // Loop through portfolio items and create slides
    portfolioItems.each(function(index) {
        var $portfolioItem = $(this);
        
        // Get portfolio data
        var title = $portfolioItem.find('.portfolio-hover-item-content').text();
        var url = $portfolioItem.attr('href');
        var portfolioIndex = $portfolioItem.closest('li').index();
        
        // Get corresponding background image
        var bgImage = $('.portfolio-hover-bg').eq(portfolioIndex).find('img');
        var imgSrc = bgImage.attr('src');
        var imgSrcset = bgImage.attr('srcset');
        var imgAlt = bgImage.attr('alt');
        
        // Clone slide template
        var newSlide = slideTemplate.clone();
        
        // Update slide image
        var slideImg = newSlide.find('.list-slideshow-image');
        slideImg.attr({
            'src': imgSrc,
            'srcset': imgSrcset,
            'alt': imgAlt,
            'data-src': imgSrc,
            'data-image': imgSrc
        });
        
        // Update slide title with link
        var titleElement = newSlide.find('.list-item-content__title');
        titleElement.html('<a href="' + url + '">' + title + '</a>');
        
        // Add slide to container
        slidesContainer.append(newSlide);
    });
    
    // Update total slides count for navigation
    var totalSlides = slidesContainer.find('.slide').length;
    
    // Update aria-live text
    $('.slideshow-gutter').find('[aria-live="polite"]').text('Item 1 of ' + totalSlides);
    
    // Re-initialize slideshow if needed
    if (typeof window.UserItemsListBannerSlideshow !== 'undefined') {
        // Trigger re-initialization of slideshow controller
        var slideshowElement = $('[data-controller="UserItemsListBannerSlideshow"]');
        if (slideshowElement.length) {
            slideshowElement.trigger('controller:refresh');
        }
    }
});
</script>

#8. Use this code to Custom CSS to

* Hide Slideshow on Desktop, show Hover Background Only

* Hide Hover Background on Mobile, show Slideshow Only

@media screen and (max-width:767px) {
  section[data-section-id="673e9a14857d4032d3e2f31c"] {
    display: none;
  }
}
@media screen and (min-width:768px) {
  section[data-section-id="687b5c32a332cb78bc7ebcbb"] {
    display: none;
  }
}