![]() You can preset the number of visible items depending on the width of scroll view.įormat:. Scroll | carousel | cover-flow | animation Or locally via the data-mobile-options attribute: Or parameters may be set globally with the MagicScrollOptions variable, e.g.:įor mobile devices (smartphones in particular), global parameters can be overwritten either with the MagicScrollMobileOptions variable: Each parameter can be applied via the data-options attribute, for example: ![]() MagicScroll.getItems(#id) - retrieve all items.įires after scroller is started and ready to operate.Ĭonsole.log('onItemHover', arguments) Ĭonsole.log('onMoveStart', arguments) ġ6 parameters are listed below for customizing Magic Scroll.MagicScroll.getItem(#id, index) - retrieve item with certain index.MagicScroll.removeItem(#id, index) - remove item with certain index.MagicScroll.addItem(#id, node, index) - add new item node (DOM element or HTML code) after item with certain index (or to the end if index is not specified).MagicScroll.jump(#id, index) - scroll to item with a certain index. ![]() MagicScroll.backward(#id, step) - scroll backward.MagicScroll.forward(#id, step) - scroll forward.MagicScroll.pause(#id) - stop autoplay on a scroller.ay(#id, speed) - start autoplay with a certain speed in milliseconds on a scroller.MagicScroll.updateOptions(#id, options) - update scroller options.nning(#id) - check whether scroller is running on HTML element with a particular #id.Without parameters, reload all scrollers on the page. MagicScroll.refresh(#id) - reload scroller by #id.Without parameters, stop all scrollers on the page. MagicScroll.stop(#id) - stop scroller by #id.Without parameters, start all scrollers on the page. MagicScroll.start(#id) - start scroller by #id.You can use the Magic Scroll API methods to scroll your items dynamically: To start it manually set autostart parameter to false. Magic Scroll starts automatically when page is loaded by default. Simply add the following code to the bottom of the magicscroll.css file: Carousel background This can be quickly changed to any colour to fit your web design. BackgroundĬhange the background colour for Carousel and Cover-flow to fit perfectly with your web design.īy default the colour displays as a dark grey background. It is perfect if you have lots of thumbnails of a product and don't want them to take up lots of space on your page. The example above will scroll the 4 small images with Magic Scroll and zoom the medium sized images with Magic Zoom Plus. This example has 4 images, each with a small, medium and big size: Then insert a data-zoom-id attribute with a value of the id of the image you want to zoom. You can use Magic Scroll with our other apps like Magic Zoom Plus, Magic Zoom or Magic Thumb.įirst, create your scroll. Magic Thumb - enlarge your images to full-screen. Magic Slideshow - watch a whole series of images. Magic Zoom - hover to zoom into your images. Magic Scroll - effortlessly scroll through products. Magic Zoom Plus - hover to zoom, click for expanded view. Here is a scroll of 9 images, each linking to a URL: ![]() If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.Ĭreate a div with a class of MagicScroll and put whatever you want to scroll inside it. Reference the CSS and JS files before the of your page. Unzip the file on your computer and FTP the magicscroll folder to your website directory (on your server), keeping the file and folder structure intact. ![]()
0 Comments
Leave a Reply. |