Announcement

Collapse
No announcement yet.

Hero Image Carousel / Slider

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

  • Hero Image Carousel / Slider

    Although DiVino is a variation of Levels, it would be good to post tips/how-to's on creating a Hero Image slider/carousel for those searching for this type of info.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Tips/how-to's. Excellent suggestion Leslie! I'd like to see more tips and tricks/how-to's for all the themes and for other topics/pieces/portions. BTW: The knowledgebase, which used to stay pretty relevant, needs a major update. Many of the articles are from the dinosaur era: https://support.miva.com/supportsuit...ips-and-tricks
    Jamie Donaldson
    JSDVS Web Design / Development
    Web Design | Web Development | E-commerce Design & Integration

    Comment


    • After a few misfires (not going to the second page of posts) I have used this code from Matt in DiVino:


      Originally posted by Matt Zimmermann View Post
      The HTML for the ReadyTheme Content Section should look more 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 -->
      and the JavaScript like this:
      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
      }
      }
      ]
      });
      });
      I need to go grab the CSS tweaks for the "dots" and post it here. (You can also just turn them off by setting dots: false).


      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Here's the CSS that Matt provided:

        Originally posted by Matt Zimmermann View Post
        Code:
        .hero-slider .slick-dots li button {
        display: block;
        width: 1rem;
        height: 1rem;
        padding: 0;
        font-size: 0;
        background-color: transparent;
        border: 0 none;
        }
        
        .hero-slider .slick-dots li button::before {
        display: block;
        width: 1rem;
        height: 1rem;
        line-height: 1;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 1rem;
        opacity: 1;
        content: '';
        }
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


        • Thank you Leslie! This helps a lot!!
          Jamie Donaldson
          JSDVS Web Design / Development
          Web Design | Web Development | E-commerce Design & Integration

          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