{"id":3462,"date":"2022-07-11T04:08:22","date_gmt":"2022-07-11T04:08:22","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3462"},"modified":"2023-06-10T11:36:30","modified_gmt":"2023-06-10T11:36:30","slug":"js-tutorial-product-slider-with-swiper-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-product-slider-with-swiper-js\/","title":{"rendered":"JS Tutorial &#8211; Product Slider With swiper.js"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Responsive product slider for Star Wars Imperial Army&#8217;s shop. Built with swiper.js.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Product Slider With swiper.js\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/RwyRRbB?default-tab=result&amp;theme-id=dark\" height=\"850\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/RwyRRbB\"><br \/>\nCSS Tutorial &#8211; Product Slider With swiper.js<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var swiper = new Swiper('.product-slider', {\r\n        spaceBetween: 30,\r\n        effect: 'fade',\r\n        initialSlide: 2,\r\n        loop: true,\r\n        navigation: {\r\n            nextEl: '.next',\r\n            prevEl: '.prev'\r\n        },\r\n        \/\/ mousewheel: {\r\n        \/\/     \/\/ invert: false\r\n        \/\/ },\r\n        on: {\r\n            init: function(){\r\n                var index = this.activeIndex;\r\n\r\n                var target = $('.product-slider__item').eq(index).data('target');\r\n\r\n                console.log(target);\r\n\r\n                $('.product-img__item').removeClass('active');\r\n                $('.product-img__item#'+ target).addClass('active');\r\n            }\r\n        }\r\n\r\n    });\r\n\r\n    swiper.on('slideChange', function () {\r\n        var index = this.activeIndex;\r\n\r\n        var target = $('.product-slider__item').eq(index).data('target');\r\n\r\n        console.log(target);\r\n\r\n        $('.product-img__item').removeClass('active');\r\n        $('.product-img__item#'+ target).addClass('active');\r\n\r\n        if(swiper.isEnd) {\r\n            $('.prev').removeClass('disabled');\r\n            $('.next').addClass('disabled');\r\n        } else {\r\n            $('.next').removeClass('disabled');\r\n        }\r\n\r\n        if(swiper.isBeginning) {\r\n            $('.prev').addClass('disabled');\r\n        } else {\r\n            $('.prev').removeClass('disabled');\r\n        }\r\n    });\r\n\r\n    $(\".js-fav\").on(\"click\", function() {\r\n        $(this).find('.heart').toggleClass(\"is-active\");\r\n    });<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Responsive product slider for Star Wars Imperial Army&#8217;s shop. <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-product-slider-with-swiper-js\/\" title=\"JS Tutorial &#8211; Product Slider With swiper.js\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3549,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[264,263,343,342,103,227],"newstopic":[],"class_list":{"0":"post-3462","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript-tutorial","9":"tag-js-tutorial","10":"tag-product-slider","11":"tag-swiper-js","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3462"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3550,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3462\/revisions\/3550"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3549"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3462"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}