{"id":81,"date":"2020-06-30T11:03:56","date_gmt":"2020-06-30T11:03:56","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/"},"modified":"2020-06-30T11:03:56","modified_gmt":"2020-06-30T11:03:56","slug":"bootstrap-slider-sliding-images-on-mouseover","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/","title":{"rendered":"bootstrap slider sliding images on mouseover"},"content":{"rendered":"<h2>Bootstrap slider sliding images on mouseover<\/h2>\n<p>Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or images sliding. The function for carousel work on click, so what if we want to make it work on mouseover. In this post I will show you how the bootstrap slider sliding images on mouseover.<\/p>\n<pre><code>\n$('#myCarousel').carousel({interval:false}); \/*  initialized the carousel but don't start it  *\/\nvar myInterval=false;\n$('.carousel-control').mouseover(function() {\n    var ctrl = $(this);\n    var interval=10;\n\n    myInterval = setInterval(function(){\n         ctrl.trigger(\"click\");\n    },interval);\n});\n\n$('.carousel-control').mouseout(function(){\n    clearInterval(myInterval);\n    myInterval = false;\n});\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap slider sliding images on mouseover Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-81","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>bootstrap slider sliding images on mouseover - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"bootstrap slider sliding images on mouseover - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"Bootstrap slider sliding images on mouseover Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T11:03:56+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/\",\"name\":\"bootstrap slider sliding images on mouseover - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2020-06-30T11:03:56+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"bootstrap slider sliding images on mouseover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"bootstrap slider sliding images on mouseover - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/","og_locale":"en_US","og_type":"article","og_title":"bootstrap slider sliding images on mouseover - Santosh Kumar Shah","og_description":"Bootstrap slider sliding images on mouseover Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T11:03:56+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/","url":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/","name":"bootstrap slider sliding images on mouseover - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2020-06-30T11:03:56+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/bootstrap-slider-sliding-images-on-mouseover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"bootstrap slider sliding images on mouseover"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}