I've managed to build my own carousel with loop for a website I'm working. Right now my next objective is to make it responsive and fluid when resizing. I've managed to make it adaptive but I just do not like the way how it resizes specifically based on the browser dimension instead of having resize fluidly. Here is a sample of the code that I've been working on.
I'm trying to make the items resize and slide based on the number of items shown. Lets say if it's a 768px viewport it will show 3 items and slide the carousel by 3 and if its mobile say 640px or 480px. It will show 1 item and slide by 1
I know there are already ready made carousel out there but I would prefer to try and build it by scratch
(function ($) { 'use strict'; var carousel = { init : function() { var carouselWidth = 0, itemListContainer = $('.item-list').width(), itemList = $('.carousel .item-list ul li'); // Set Container Width $('.carousel .item-list ul').children().each(function() { carouselWidth += $(this).outerWidth(); $('.carousel .item-list ul').width(carouselWidth + 1000); }); // function dynamicItemWidth() { // if ( $('body') <= 1024 ) { // itemWidth = itemList.width( itemListContainer / 5 ); // } // if ( $('body') <= 480 ) { // itemWidth = itemList.width( itemListContainer / 2 ); // } // if ( $('body') <= 320 ) { // itemWidth = itemList.width( itemListContainer / 1 ); // } // } var itemWidth = itemList.width( itemListContainer / 5 ), itemSize = itemWidth.width(); $('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') ); $('.carousel .item-list ul').css('left', '-' + itemSize + 'px'); $('.btns .next').click(function(){ var move = $('.carousel .item-list ul li').outerWidth(); var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move; function animate( repeat, speed ) { $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){ $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') ); $('.carousel .item-list ul').css({'left' : '-' + move + 'px'}); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }); } animate( 5, 100 ); }); $('.btns .prev').click(function() { var move = $('.carousel .item-list ul li').outerWidth(); var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move; function animate( repeat, speed ) { $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){ $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last')); $('.carousel .item-list ul').css({'left' : '-' + move + 'px'}); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }); } animate( 5, 100 ); }); } } $(document).ready(function(){ carousel.init(); }); })(jQuery);/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* -- #Carousel -- */ .carousel { position: relative; } .carousel .item-list { overflow: hidden; } .carousel .item-list ul { display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 10px; position: relative; overflow: hidden; } .carousel .btns { width: 100%; z-index: 10; top: 50%; } .carousel .btns li { display: inline-block; cursor: pointer; } .carousel.-aim-partners { position: relative; } .carousel.-aim-partners .item-list { max-width: 1204px; margin: 0 auto; } .carousel.-aim-partners .item-list ul li { float: left; width: 230px; margin-right: 40px; height: 110px; margin-top: 10px; margin-bottom: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; } .carousel.-aim-partners .item-list ul li:nth-child(odd) { background-color: teal; } .carousel.-aim-partners .item-list ul li:nth-child(even) { background-color: #ccc; } .carousel.-aim-partners .btns { width: 110%; left: -70px; } .carousel.-aim-partners .btns li { width: 35px; height: 40px; } .carousel.-aim-partners .btns li.prev { background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0; } .carousel.-aim-partners .btns li.next { background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0; } /* -- End Carousel -- */ /*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class='carousel -aim-partners'> <div class='item-list'> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> </ul> </div> <ul class="btns"> <li class="prev"> <i class="fa fa-angle-left" aria-hidden="true">prev</i> </li> <li class="next"> <i class="fa fa-angle-right" aria-hidden="true">next</i> </li> </ul> </div> </div>3 Answers
Answers 1
Your approach has gone in wrong directions at several places. Resizing all the containers using JavaScript can be avoided & you can let css do the work. I can't submit a quality answer to this without rewriting the whole plugin.
If you need, I can write a version that relies on CSS than JavaScript (which is preferable & adaptable in most cases) and follows the "Module Structure" of JavaScript plugins.
Please refer this article to learn a bit about the proper structuring of code.
Answers 2
Why waste time building your own carousel? There are already ready made solutions to help you with. Try Slick Slider, it's one of the best I've used. :)
Answers 3
Agree with MegaColorBoy
http://kenwheeler.github.io/slick/
This is a better one to go with, also this gives better compatibility over the mobile devices.
Also if you want to write from scratch than write something new :) all the best.
0 comments:
Post a Comment