Swiper Jquery Plugin

It is a modern mobile touch slider.

CSS:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />

JS:


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js "></script>

It has lot of components.

  • Swipe slider navigation
  • Swipe pagination
  • Swipe pagination with dynamic bullets
  • Progress pagination
  • Fraction pagination
  • Custom pagination
  • Page Scrollbar
  • Vertical page slider
  • Space between slides
  • Multiple slides per view
  • Scroll container
  • Multiple row slides layout
  • Nested swipers
  • Loop mode carousel
  • Loop mode with multiple slides per group
  • 3D cube effect
  • 3D coverflow effect
  • 3D Flip effect
  • Mousewheel control
  • Autoplay carousel
  • Dynamic slides (append/prepend slide pagination)
  • Thumbs gallery with two-way swipe
  • Parallax (Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.)
  • Responsive breakpoints slider
  • Auto height slider
  • Zoom slider
  • Slideable navigation drawer

Demo: http://idangero.us/swiper/demos/

Continue Reading

Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />

Step 2:
Include Jquery library and webui-popover js files in head section.


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.


$(document).ready(function(){
        $('#tooltippanel').webuiPopover({
                constrains: 'horizontal', 
                trigger:'click',
                multi: true,
                placement:'right-top',
                width:100,
                content: 'tooltip contents placed here...'
        });
    });

Explanation:

  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading

Show one popover at a time and hide other popovers

Show one popover at a time

We have implemented popovers on a web page by using webuipopover jquery pluign. When use clicked the first popover after that he wanted to click another popover without closing the first popover at that time both the popovers will open.

To overcome this issue we have to use following script.

Script:


$('.triggerpopover').webuiPopover();
$('.triggerpopover').on('click', function (e) {
  $('.triggerpopover').not(this).webuiPopover('hide');
});
Continue Reading