{"id":866,"date":"2020-11-19T17:49:16","date_gmt":"2020-11-19T12:19:16","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=866"},"modified":"2020-11-19T17:49:16","modified_gmt":"2020-11-19T12:19:16","slug":"make-bootstrap-carousel-slider-on-mobile-left-right-swipe","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/","title":{"rendered":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe"},"content":{"rendered":"

In this blog, discuss code about make bootstrap carousel slider on mobile left-right swipe only include touchSwipe javascript library.<\/p>\n

 <\/p>\n

HTML Code<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu\" crossorigin=\"anonymous\">\r\n\r\n<div id=\"integrationLogo\" class=\"carousel slide\" data-ride=\"carousel\">\r\n<!-- Indicators -->\r\n<ol class=\"carousel-indicators\">\r\n<li data-target=\"#integrationLogo\" data-slide-to=\"0\" class=\"active\"><\/li>\r\n<li data-target=\"#integrationLogo\" data-slide-to=\"1\"><\/li>\r\n<\/ol>\r\n<!-- Wrapper for slides -->\r\n<div class=\"carousel-inner\">\r\n<div class=\"item active\"><img src=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\"><\/div>\r\n<div class=\"item\"><img src=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\"><\/div>\r\n<div class=\"item\"><img src=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\"><\/div>\r\n<div class=\"item\"><img src=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/jquery-ajax-php-code-for-contact-form.jpg\"><\/div>\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
JavaScript Libracy<\/p>\n
<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\r\n\r\n<!-- Latest compiled and minified JavaScript -->\r\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-aJ21OjlMXNL5UyIl\/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<!-- Include only below libary if you included bootstrap library  -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.touchswipe\/1.6.4\/jquery.touchSwipe.min.js\"><\/script>\r\n\r\n\r\n<\/pre>\n
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {<\/p>\n
if(direction == ‘left’){
\njQuery(this).carousel(‘next’);
\n}<\/p>\n
if(direction == ‘right’){
\njQuery(this).carousel(‘prev’);
\n}<\/p>\n
},
\nallowPageScroll:”vertical”<\/p>\n
});
\n});
\n<\/script><\/p>\n
JavaScript Code<\/p>\n
<script text=\"text\/javascript\">\r\njQuery(document).ready(function(){\r\njQuery('.carousel').swipe({\r\nswipe: function(event, direction, distance, duration, fingerCount, fingerData) {\r\nif(direction == 'left'){\r\njQuery(this).carousel('next'); \r\n}\r\nif(direction == 'right'){\r\njQuery(this).carousel('prev'); \r\n}\r\n},\r\nallowPageScroll:\"vertical\"\r\n});\r\n});\r\n<\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"
In this blog, discuss code about make bootstrap carousel slider on mobile left-right swipe only include touchSwipe javascript library.   HTML Code <link rel=”stylesheet” href=”https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css” integrity=”sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu” crossorigin=”anonymous”> <div id=”integrationLogo” class=”carousel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-866","post","type-post","status-publish","format-standard","hentry","category-bootstrap"],"acf":[],"yoast_head":"\nMake Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools<\/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:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"In this blog, discuss code about make bootstrap carousel slider on mobile left-right swipe only include touchSwipe javascript library.   HTML Code <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <div id="integrationLogo" class="carousel […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-19T12:19:16+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Make Bootstrap Carousel Slider on Mobile Left Right Swipe\",\"datePublished\":\"2020-11-19T12:19:16+00:00\",\"dateModified\":\"2020-11-19T12:19:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\"},\"wordCount\":62,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\",\"name\":\"Make Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2020-11-19T12:19:16+00:00\",\"dateModified\":\"2020-11-19T12:19:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Bootstrap Carousel Slider on Mobile Left Right Swipe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools","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:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/","og_locale":"en_US","og_type":"article","og_title":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools","og_description":"In this blog, discuss code about make bootstrap carousel slider on mobile left-right swipe only include touchSwipe javascript library.   HTML Code <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu\" crossorigin=\"anonymous\"> <div id=\"integrationLogo\" class=\"carousel […]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-11-19T12:19:16+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe","datePublished":"2020-11-19T12:19:16+00:00","dateModified":"2020-11-19T12:19:16+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/"},"wordCount":62,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["Bootstrap"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/","url":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/","name":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2020-11-19T12:19:16+00:00","dateModified":"2020-11-19T12:19:16+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/make-bootstrap-carousel-slider-on-mobile-left-right-swipe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make Bootstrap Carousel Slider on Mobile Left Right Swipe"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=866"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/866\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}