Announcement

Collapse
No announcement yet.

Turning Hero Image into a slider

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Rodney
    started a topic Turning Hero Image into a slider

    Turning Hero Image into a slider

    HI
    Looking for some guidance on turning the Hero Image within the Levels Ready Theme into a Slider. I have followed the instructions posted by Matt Zimmerman but I must be missing something.
    I have added the HTML Code to a ReadyTheme content:
    Code:
    <div id="js-hero-slider" class="hero-slider">
        <mvt:item name="readytheme" param="image( 'img_slide01' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide02' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide03' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide04' )"/>
    </div> <!-- end hero-slider -->
    Then I added the html Code to the java script file
    Code:
        $.ajax({
            cache: true,
            crossDomain: true,
            dataType: 'script',
            url: theme_path + '/js/jquery.slick.min.js'
        }).done(function () {
            // ---- Hero Slide Show ---- //
            $('#js-hero-slider').slick({
                arrows: false,
                autoplay: true,
                autoplaySpeed: 10000,
                dots: true,
                slide: '',
                responsive: [{breakpoint: 960, settings: {dots: false}}]
            });
        });
    Then added this html code to the theme.css file
    Code:
        .hero-slider {
            margin-bottom: 3rem;
            visibility: hidden;
        }
    
        .hero-slider.slick-initialized {
            visibility: visible;
        }
    
        .hero-slider img {
            width: 100vw;
        }
    
        .hero-slider .slick-dots {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 1rem;
            bottom: 2rem;
            left: 50%;
            line-height: 2;
            margin: 0;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 7rem;
        }
    
        .hero-slider .slick-dots li {
            margin: 0 0.25rem;
            vertical-align: middle;
            width: 1rem;
            height: 1rem;
        }
    
        .hero-slider .slick-dots li button {
            width: 1rem;
            height: 1rem;
            padding: 0;
        }
    
        .hero-slider .slick-dots li button::before {
            line-height: 1;
            width: 1rem;
            height: 1rem;
            content: '';
            opacity: 1;
            background: transparent;
            border: 1px solid #fff;
            border-radius: 1rem;
        }
    
        .slick-dots li.slick-active button:before {
            background: #fff;
            color: transparent;
            opacity: 1;
        }
    Also created 4 images as img_slide01, 02,03 and 04 in the image tabs within the Ready Theme Image Tab. Any ideas as to what I am missing? Seems like it should be working but it is not. Any help would be so appreciated. Thank you Tammy
    Last edited by Matt Zimmermann; 03-19-19, 07:34 AM. Reason: formatting

  • Rodney
    replied
    You are right! Its gone. Crazy I cleared the cache this morning and that is when I showed up. I went in and put false for the dots but never thought to clear the cache. Thank You!

    Leave a comment:


  • Matt Zimmermann
    replied
    I am not seeing that section on your site. Try clearing your cache and reloading the page, it may be stuck in your browser.

    Leave a comment:


  • Rodney
    replied
    Here does this help?
    Attached Files

    Leave a comment:


  • Matt Zimmermann
    replied
    Can you post a larger screen shot with the denotation, I cannot see anything in this one?

    Leave a comment:


  • Rodney
    replied
    I have attached a picture with them circled in red. I am not sure where to go to get rid of them. I thought I could put false for the dots like I put true for the arrows but it is now working so assuming I need to go somewhere else. Where would I change the display for them?
    Attached Files

    Leave a comment:


  • Matt Zimmermann
    replied
    I'm not seeing what you are referring to, but I am going to guess you are talking about the navigation dots. If that's the case, you can change their display in your JavaScript by changing dots: true to dots: false

    Leave a comment:


  • Rodney
    replied
    Can you tell me how to remove the buttons on the bottom center of the images in the slider? I have the forward and backward arrows on the left and right side of the images so I would like to remove the buttons, I have attached a screenshot. Thank you
    Attached Files

    Leave a comment:


  • Rodney
    replied
    Matt Its Working!! Its Awesome!! Thank You very Much!!! So appreciate the help!!!

    Leave a comment:


  • Rodney
    replied
    HI Matt
    I am sorry. Yes it is working but the second image is doubled up with the first image in the slider. Would you know what I have to do to correct that? It should be just the top half of what is appearing. Looks like it is throwing the size on the page off. Thanks

    Leave a comment:


  • Rodney
    replied
    HI Matt
    I am back from my meeting. Just wondering what my next step would be to have this working. It looks like it was but that has disappeared.

    Leave a comment:


  • Rodney
    replied
    HI Matt
    Looks like you might be working on something. I Have to leave shortly for a meeting. I will touch base when I get back. I am grateful and appreciate all your efforts helping me. Thank you!

    Leave a comment:


  • Rodney
    replied
    HI
    Ok it looks like its working!!! Well 3 of the 4 images are showing up on the SF page as a slider. Opps I see I have <<. So now I just need to figure out why img_slider01 is not appearing.

    Leave a comment:


  • Matt Zimmermann
    replied
    The code for the ReadyTheme Content section should look like this:
    Code:
    <div id="js-hero-slider" class="hero-slider">
        <mvt:item name="readytheme" param="image( 'img_slide01' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide02' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide03' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide04' )"/>
    </div>
    <!-- end hero-slider -->

    Leave a comment:


  • Rodney
    replied
    This is the code I have in the ReadyTheme Content section for the hero_slider
    <<div id="js-hero-slider" class="hero-slider">
    <mvt:item name="readytheme" param="contentsection( 'hero_slider' )" />
    <mvt:item name="readytheme" param="image( 'img_slide01' )"/>
    <mvt:item name="readytheme" param="image( 'img_slide02' )"/>
    <mvt:item name="readytheme" param="image( 'img_slide03' )"/>
    <mvt:item name="readytheme" param="image( 'img_slide04' )"/>
    </div>
    and this is the Item Tag: <mvt:item name="readytheme" param="contentsection( 'hero_slider' )" />
    So if I put that on the first line in the content section of the Sf page and update it should work right? Gosh it just seems so simple.

    Leave a comment:

Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept