diff --git a/README.md b/README.md index dd0c129..0afc2a8 100644 --- a/README.md +++ b/README.md @@ -55,12 +55,8 @@ type: milli seconds # data-speed ``` -<<<<<<< HEAD type: milli seconds, default: 300 -======= -type: milli seconds ->>>>>>> 8fdc6ef5132bc404c1f607a5fe3afe993ee1e77a ``` (eg. data-speed="300") @@ -70,8 +66,4 @@ Hope you guys enjoying the Rescarousel if you find any bug let me know i will try to solve as much as possible -<<<<<<< HEAD > # By CreativeTechSoft -======= -> # By CreativeTechSoft ->>>>>>> 8fdc6ef5132bc404c1f607a5fe3afe993ee1e77a diff --git a/css/resCarousel.css b/css/resCarousel.css index 0fe045e..2600b99 100644 --- a/css/resCarousel.css +++ b/css/resCarousel.css @@ -31,7 +31,7 @@ } .resCarousel { - float: left; + /*float: left;*/ overflow: hidden; width: 100%; position: relative; diff --git a/demoImg.jpg b/demoImg.jpg new file mode 100644 index 0000000..b81481f Binary files /dev/null and b/demoImg.jpg differ diff --git a/index.html b/index.html index 93047cc..73235c9 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,10 @@ background: #eee; } + .p0 { + padding: 0; + } + .divCount { display: table; min-height: 300px; @@ -54,221 +58,177 @@ display: table-cell; vertical-align: middle; } + + .first .item div { + background: url('demoImg.jpg') center top no-repeat; + background-size: cover; + min-height: 500px; + } + + .item div { + background: url('demoImg.jpg') center center no-repeat; + background-size: cover; + height: 250px; + color: white; + } + + .item div h1 { + background: rgba(0, 0, 0, .4); + } -

ResCarousel
By CreativeTechSoft

+

ResCarousel By CreativeTechSoft

-
-
-
-

data-slide=1 & data-speed = 300 & data-interval = "6000"

-
-
-
- -
-
-

1

-
-
- -
-
-

2

-
-
- -
-
-

3

-
-
- -
-
-

4

-
-
- -
-
-

5

-
-
- -
-
-

6

-
-
+
+

data-items="1,1,1,1" data-slide="1" data-speed="700" data-interval="6000"

-
-
-

7

-
-
+
+
-
-
-

8

-
+
+
+

1

+
-
-
-

9

-
-
- -
-
-

10

-
+
+
+

2

+
-
-
-

11

-
+
+
+

3

+
-
-
-

12

-
+
+
+

4

+
-
-
-

13

-
+
+
+

5

- -
-
-

14

-
-
-
- - +
+ +
-
-
-
-

data-slide=2 & data-speed = 600

-
-
-
+
+

data-items="2,2,2,2" data-slide="2" data-interval="2000" data-speed="600"

+
+
-
-
-

1

-
+
+
+

1

+
-
-
-

2

-
+
+
+

2

+
-
-
-

3

-
+
+
+

3

+
-
-
-

4

-
+
+
+

4

+
-
-
-

5

-
+
+
+

5

+
-
-
-

6

-
+
+
+

6

+
-
-
-

7

-
+
+
+

7

+
-
-
-

8

-
+
+
+

8

+
-
-
-

9

-
+
+
+

9

+
-
-
-

10

-
+
+
+

10

+
-
-
-

11

-
+
+
+

11

+
-
-
-

12

-
+
+
+

12

+
-
-
-

13

-
+
+
+

13

+
-
-
-

14

-
+
+
+

14

-
- - +
+ +
-
+
-

data-slide=3 & data-speed = 900

+

data-items="2,3,3,3" data-slide="3" data-speed="900"

-
+
@@ -362,10 +322,10 @@

14

-
+
-

data-slide=4

+

data-items="2,4,4,4" data-slide="1"

@@ -461,12 +421,12 @@

14

-
+
-

data-slide=5

+

data-items="2,3,4,5" data-slide="5"

-
+
diff --git a/js/resCarousel.js b/js/resCarousel.js index ade638f..e8bf8cc 100644 --- a/js/resCarousel.js +++ b/js/resCarousel.js @@ -1,97 +1,115 @@ //resCarousel $(document).ready(function() { - $('.leftRs, .rightRs').click(function() { - // alert("btnClick"); + $(document).on('click', '.leftRs, .rightRs', function() { ResCarousel(this); }); + $(document).on("mouseenter", ".ResHover", function() { + $(this).addClass("ResHovered"); + }); + + $(document).on("mouseleave", ".ResHover", function() { + $(this).removeClass("ResHovered"); + }); ResCarouselSize(); - ResAutoSlide(); + ResCarouselSlide(); }); $(window).resize(function() { - ResCarouselSize(); + //ResCarouselSize(); + ResCarouselResize(); }); // Rescarousel Auto Slide -function ResAutoSlide() { +function ResCarouselSlide() { $(".resCarousel").each(function() { var thiss = $(this).find(".rightRs"); var dataInterval = $(this).attr('data-interval'); - if (!isNaN(dataInterval)) { - setInterval(function() { - ResCarousel(thiss); - }, parseInt(dataInterval)); - } + !isNaN(dataInterval) && $(this).addClass("ResHover") && setInterval(function() { + !(thiss.parent().hasClass("ResHovered")) && ResCarousel(thiss); + //console.log(thiss.parent().hasClass("ResHovered")) + }, parseInt(dataInterval)); + }); +} + +function ResCarouselResize() { + var it = 0, + r = $('body').width(); + $('.resCarousel').each(function() { + var itemsSplit = $(this).attr("data-items").split(','); + var divValue = $(this).attr('data-value'); + var itemWidth = $(this).find('.item').width(); + $(this).find(".resCarousel-inner").scrollLeft(divValue * itemWidth); + it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0]; + $(this).attr("data-itm", it); }); } //this function define the size of the items function ResCarouselSize() { - - var incno = 0; - var id = 0; - var itemsDiv = ('.resCarousel-inner'); - var bodyWidth = $('body').width(); - $(itemsDiv).each(function() { - id++; - var sampwidth = $(this).width(); - - var itemsSplit = $(this).parent().attr("data-items").split(','); - - $(this).parent().attr("id", "ResSlid" + id); - - if (bodyWidth >= 1200) { - incno = itemsSplit[3]; - } else if (bodyWidth >= 992) { - incno = itemsSplit[2]; - } else if (bodyWidth >= 768) { - incno = itemsSplit[1]; - } else { - incno = itemsSplit[0]; - } - var itemWidth = sampwidth / incno; - - $(this).find("style").remove(); - $(this).append(""); - //$(this).attr("data-width", itemWidth); - //console.log(itemWidth); - - // value available - var divValue = $(this).parent().attr('value'); - if (divValue) { - $(this).scrollLeft(divValue * itemWidth); - } else { - $(this).parent().attr("value", "0"); + //var t0 = performance.now(); + var it = 0, + r = $('body').width(), + styleCollector = styleCollector0 = styleCollector1 = styleCollector2 = styleCollector3 = ""; + + $('.resCarousel').each(function(index) { + var itemsSplit = $(this).attr("data-items").split(','); + $(this).addClass("ResSlid" + index); + + for (var i = 0; i < 4; i++) { + if (i == 0) { + styleCollector0 += ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}"; + } else if (i == 1) { + styleCollector1 += ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}"; + } else if (i == 2) { + styleCollector2 += ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}"; + } else if (i == 3) { + styleCollector3 += ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}"; + } } - $(this).parent().attr("data-itm", incno); - + $(this).attr("data-value", "0"); + $(this).find(".leftRs").attr("data-loop", 0); + it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0]; + $(this).attr("data-itm", it); }); + + styleCollector = "@media (max-width:767px){" + styleCollector0 + "}" + + "@media (min-width:768px){" + styleCollector1 + "}" + + "@media (min-width:992px){" + styleCollector2 + "}" + + "@media (min-width:1200px){" + styleCollector3 + "}"; + + + //console.log(styleCollector); + $("body").append("
") + $('.ResStyleManager').html(null).append(""); + //var t1 = performance.now(); + //console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to Size'); } //this function used to move the items function ResCarousel(Btn) { - var t0 = performance.now(); - var parent = $(Btn).parent(); - var leftBtn = parent.find('.leftRs'), + //var t0 = performance.now(); + var parent = $(Btn).parent(), + leftBtn = parent.find('.leftRs'), rightBtn = parent.find('.rightRs'), slide = parseInt(parent.attr("data-slide")), itemsDiv = parent.find('.resCarousel-inner'), - divValue = parseInt(parent.attr('value')), - //itemWidth = itemsDiv.attr("data-width"), + divValue = parseInt(parent.attr('data-value')), itemSpeed = parseInt(parent.attr("data-speed")), translateXval = '', currentSlide = "", - itemLenght = itemsDiv.find(".item").length; - var itemWidth = itemsDiv.find('.item').outerWidth(); - - var dataItm = parseInt(parent.attr("data-itm")); - var cond = $(Btn).hasClass("leftRs"); + itemLenght = itemsDiv.find(".item").length, + itemWidth = itemsDiv.find('.item').outerWidth(), + dataItm = parseInt(parent.attr("data-itm")), + cond = $(Btn).hasClass("leftRs"); //console.log(cond); + itemSpeed = !isNaN(itemSpeed) ? itemSpeed : 400; + slide = slide < dataItm ? slide : dataItm; + if (cond) { currentSlide = divValue - slide; - translateXval = currentSlide * itemWidth + translateXval = currentSlide * itemWidth; var MoveSlide = currentSlide + slide; var itemloop = leftBtn.attr("data-loop"); @@ -101,7 +119,7 @@ function ResCarousel(Btn) { currentSlide = itemLenght - slide; translateXval = currentSlide * itemWidth; currentSlide = itemLenght - dataItm; - + itemSpeed = 400; //console.log(currentSlide + "," + translateXval); leftBtn.attr("data-loop", 1); rightBtn.attr("data-loop", 0); @@ -113,7 +131,7 @@ function ResCarousel(Btn) { } else { currentSlide = divValue + slide; - translateXval = currentSlide * itemWidth + translateXval = currentSlide * itemWidth; leftBtn.attr("data-loop", 1); var MoveSlide = currentSlide + slide; @@ -125,6 +143,7 @@ function ResCarousel(Btn) { currentSlide = translateXval = 0; rightBtn.attr("data-loop", 1); leftBtn.attr("data-loop", 0); + itemSpeed = 400; } else if (itemLenght <= (MoveSlide - slide + dataItm)) { currentSlide = itemLenght - slide; translateXval = currentSlide * itemWidth; @@ -135,11 +154,10 @@ function ResCarousel(Btn) { } //console.log(itemsDiv.scrollLeft() + "," + translateXval) //console.log(itemSpeed); - itemSpeed = !isNaN(itemSpeed) ? itemSpeed : 400; itemsDiv.animate({ scrollLeft: translateXval }, itemSpeed); - parent.attr("value", currentSlide); + parent.attr("data-value", currentSlide); - var t1 = performance.now(); - console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate'); + //var t1 = performance.now(); + //console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate'); } \ No newline at end of file diff --git a/js/resCarousel.min.js b/js/resCarousel.min.js index 6ee7257..9bfa2d2 100644 --- a/js/resCarousel.min.js +++ b/js/resCarousel.min.js @@ -1 +1 @@ -function ResAutoSlide(){$(".resCarousel").each(function(){var t=$(this).find(".rightRs"),a=$(this).attr("data-interval");isNaN(a)||setInterval(function(){ResCarousel(t)},parseInt(a))})}function ResCarouselSize(){var t=0,a=0,e=".resCarousel-inner",r=$("body").width();$(e).each(function(){a++;var e=$(this).width(),s=$(this).parent().attr("data-items").split(",");$(this).parent().attr("id","ResSlid"+a),t=r>=1200?s[3]:r>=992?s[2]:r>=768?s[1]:s[0];var i=e/t;$(this).find("style").remove(),$(this).append("");var o=$(this).parent().attr("value");o?$(this).scrollLeft(o*i):$(this).parent().attr("value","0"),$(this).parent().attr("data-itm",t)})}function ResCarousel(t){var a=performance.now(),e=$(t).parent(),r=e.find(".leftRs"),s=e.find(".rightRs"),i=parseInt(e.attr("data-slide")),o=e.find(".resCarousel-inner"),n=parseInt(e.attr("value")),l=parseInt(e.attr("data-speed")),d="",p="",u=o.find(".item").length,f=o.find(".item").outerWidth(),h=parseInt(e.attr("data-itm")),c=$(t).hasClass("leftRs");if(c){p=n-i,d=p*f;var v=p+i,R=r.attr("data-loop");s.attr("data-loop",1),0==R?(p=u-i,d=p*f,p=u-h,r.attr("data-loop",1),s.attr("data-loop",0)):i>=v&&(p=d=0,r.attr("data-loop",0))}else{p=n+i,d=p*f,r.attr("data-loop",1);var v=p+i,R=s.attr("data-loop");0==R?(p=d=0,s.attr("data-loop",1),r.attr("data-loop",0)):v-i+h>=u&&(p=u-i,d=p*f,p=u-h,s.attr("data-loop",0))}l=isNaN(l)?400:l,o.animate({scrollLeft:d},l),e.attr("value",p);var m=performance.now();console.log("Took",(m-a).toFixed(4),"milliseconds to generate")}$(document).ready(function(){$(".leftRs, .rightRs").click(function(){ResCarousel(this)}),ResCarouselSize(),ResAutoSlide()}),$(window).resize(function(){ResCarouselSize()}); \ No newline at end of file +function ResCarouselSlide(){$(".resCarousel").each(function(){var t=$(this).find(".rightRs"),e=$(this).attr("data-interval");!isNaN(e)&&$(this).addClass("ResHover")&&setInterval(function(){!t.parent().hasClass("ResHovered")&&ResCarousel(t)},parseInt(e))})}function ResCarouselResize(){var t=0,e=$("body").width();$(".resCarousel").each(function(){var a=$(this).attr("data-items").split(","),s=$(this).attr("data-value"),l=$(this).find(".item").width();$(this).find(".resCarousel-inner").scrollLeft(s*l),t=e>=1200?a[3]:e>=992?a[2]:e>=768?a[1]:a[0],$(this).attr("data-itm",t)})}function ResCarouselSize(){var t=0,e=$("body").width(),a=styleCollector0=styleCollector1=styleCollector2=styleCollector3="";$(".resCarousel").each(function(a){var s=$(this).attr("data-items").split(",");$(this).addClass("ResSlid"+a);for(var l=0;4>l;l++)0==l?styleCollector0+=".ResSlid"+a+" .item {width: "+100/s[l]+"%}":1==l?styleCollector1+=".ResSlid"+a+" .item {width: "+100/s[l]+"%}":2==l?styleCollector2+=".ResSlid"+a+" .item {width: "+100/s[l]+"%}":3==l&&(styleCollector3+=".ResSlid"+a+" .item {width: "+100/s[l]+"%}");$(this).attr("data-value","0"),$(this).find(".leftRs").attr("data-loop",0),t=e>=1200?s[3]:e>=992?s[2]:e>=768?s[1]:s[0],$(this).attr("data-itm",t)}),a="@media (max-width:767px){"+styleCollector0+"}@media (min-width:768px){"+styleCollector1+"}@media (min-width:992px){"+styleCollector2+"}@media (min-width:1200px){"+styleCollector3+"}",$("body").append('
'),$(".ResStyleManager").html(null).append("")}function ResCarousel(t){var e=$(t).parent(),a=e.find(".leftRs"),s=e.find(".rightRs"),l=parseInt(e.attr("data-slide")),i=e.find(".resCarousel-inner"),o=parseInt(e.attr("data-value")),r=parseInt(e.attr("data-speed")),d="",n="",u=i.find(".item").length,h=i.find(".item").outerWidth(),c=parseInt(e.attr("data-itm")),C=$(t).hasClass("leftRs");if(r=isNaN(r)?400:r,l=c>l?l:c,C){n=o-l,d=n*h;var R=n+l,f=a.attr("data-loop");s.attr("data-loop",1),0==f?(n=u-l,d=n*h,n=u-c,r=400,a.attr("data-loop",1),s.attr("data-loop",0)):l>=R&&(n=d=0,a.attr("data-loop",0))}else{n=o+l,d=n*h,a.attr("data-loop",1);var R=n+l,f=s.attr("data-loop");0==f?(n=d=0,s.attr("data-loop",1),a.attr("data-loop",0),r=400):R-l+c>=u&&(n=u-l,d=n*h,n=u-c,s.attr("data-loop",0))}i.animate({scrollLeft:d},r),e.attr("data-value",n)}$(document).ready(function(){$(document).on("click",".leftRs, .rightRs",function(){ResCarousel(this)}),$(document).on("mouseenter",".ResHover",function(){$(this).addClass("ResHovered")}),$(document).on("mouseleave",".ResHover",function(){$(this).removeClass("ResHovered")}),ResCarouselSize(),ResCarouselSlide()}),$(window).resize(function(){ResCarouselResize()}); \ No newline at end of file