Skip to content

Commit 09d1896

Browse files
hazzikhazzik
committed
Add carousel controls
1 parent 32c4779 commit 09d1896

File tree

2 files changed

+75
-21
lines changed

2 files changed

+75
-21
lines changed

‎css/Common.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,13 @@ body {
536536
font-size: 84%;
537537
}
538538

539+
.jcarousel-wrapper {
540+
position: relative;
541+
width: 100%;
542+
box-sizing: border-box;
543+
padding: 0 10px;
544+
}
545+
539546
.jcarousel {
540547
position: relative;
541548
overflow: hidden;
@@ -551,6 +558,38 @@ body {
551558
float: left;
552559
}
553560
}
561+
562+
a.jcarousel-control-prev,
563+
a.jcarousel-control-next {
564+
position: absolute;
565+
top: 120px;
566+
width: 15px;
567+
height: 15px;
568+
text-align: center;
569+
background: #4E443C;
570+
color: #fff !important;
571+
text-decoration: none;
572+
text-shadow: 0 0 1px #000;
573+
font: 18px/14px Arial, sans-serif;
574+
-webkit-border-radius: 15px;
575+
-moz-border-radius: 15px;
576+
border-radius: 15px;
577+
-webkit-box-shadow: 0 0 2px #999;
578+
-moz-box-shadow: 0 0 2px #999;
579+
box-shadow: 0 0 2px #999;
580+
&:hover span {
581+
display: block;
582+
}
583+
}
584+
585+
.jcarousel-control-prev {
586+
left: 0px;
587+
}
588+
589+
.jcarousel-control-next {
590+
right: 0px;
591+
}
592+
554593
.books-jcarousel {
555594
width: 100%;
556595
li {

‎index.html

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,34 @@
1717
</p>
1818
</div>
1919
<hr />
20-
<div class="books-jcarousel jcarousel">
21-
<ul>
22-
<li>
23-
<a target="_blank" href="https://www.amazon.com/gp/product/1784393568/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1784393568&linkCode=as2&tag=nhibernate-20&linkId=a1bd9ba904c86ae00082be7ea2514bcd"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1784393568&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1784393568" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
24-
</li>
25-
<li>
26-
<a target="_blank" href="https://www.amazon.com/gp/product/1784396427/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1784396427&linkCode=as2&tag=nhibernate-20&linkId=1d8bce66c57e526da4d4151b6b81b1c2"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1784396427&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1784396427" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
27-
</li>
28-
<li>
29-
<a target="_blank" href="https://www.amazon.com/gp/product/1932394923/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1932394923&linkCode=as2&tag=nhibernate-20&linkId=86c025be31a1dd216e01f0d593873868"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1932394923&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1932394923" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
30-
</li>
31-
<li>
32-
<a target="_blank" href="https://www.amazon.com/gp/product/1540637441/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1540637441&linkCode=as2&tag=nhibernate-20&linkId=9fbe48b9714fd35911ebfa85f3b217b0"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1540637441&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1540637441" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
33-
</li>
34-
<li>
35-
<a target="_blank" href="https://www.amazon.com/gp/product/B01FFFQS32/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01FFFQS32&linkCode=as2&tag=nhibernate-20&linkId=d44584abb494ab75dc232b44e6ffa0b9"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=B01FFFQS32&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=B01FFFQS32" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
36-
</li>
37-
<li>
38-
<a target="_blank" href="https://www.amazon.com/gp/product/1849516022/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1849516022&linkCode=as2&tag=nhibernate-20&linkId=6650bc91cf28ee49ab2598de9b0d06f8"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1849516022&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1849516022" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
39-
</li>
40-
</ul>
20+
<div class="jcarousel-wrapper">
21+
<div class="books-jcarousel jcarousel">
22+
<ul>
23+
<li>
24+
<a target="_blank" href="https://www.amazon.com/gp/product/1784393568/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1784393568&linkCode=as2&tag=nhibernate-20&linkId=a1bd9ba904c86ae00082be7ea2514bcd"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1784393568&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1784393568" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
25+
</li>
26+
<li>
27+
<a target="_blank" href="https://www.amazon.com/gp/product/1784396427/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1784396427&linkCode=as2&tag=nhibernate-20&linkId=1d8bce66c57e526da4d4151b6b81b1c2"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1784396427&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1784396427" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
28+
</li>
29+
<li>
30+
<a target="_blank" href="https://www.amazon.com/gp/product/1932394923/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1932394923&linkCode=as2&tag=nhibernate-20&linkId=86c025be31a1dd216e01f0d593873868"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1932394923&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1932394923" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
31+
</li>
32+
<li>
33+
<a target="_blank" href="https://www.amazon.com/gp/product/1540637441/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1540637441&linkCode=as2&tag=nhibernate-20&linkId=9fbe48b9714fd35911ebfa85f3b217b0"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1540637441&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1540637441" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
34+
</li>
35+
<li>
36+
<a target="_blank" href="https://www.amazon.com/gp/product/B01FFFQS32/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01FFFQS32&linkCode=as2&tag=nhibernate-20&linkId=d44584abb494ab75dc232b44e6ffa0b9"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=B01FFFQS32&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=B01FFFQS32" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
37+
</li>
38+
<li>
39+
<a target="_blank" href="https://www.amazon.com/gp/product/1849516022/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1849516022&linkCode=as2&tag=nhibernate-20&linkId=6650bc91cf28ee49ab2598de9b0d06f8"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1849516022&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1849516022" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
40+
</li>
41+
<li>
42+
<a target="_blank" href="https://www.amazon.com/gp/product/1118112571/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1118112571&linkCode=as2&tag=nhibernate-20&linkId=739ff5bbb5101d9e8c3778f98e7f06d1"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1118112571&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=nhibernate-20" ></a><img src="//ir-na.amazon-adsystem.com/e/ir?t=nhibernate-20&l=am2&o=1&a=1118112571" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
43+
</li>
44+
</ul>
45+
</div>
46+
<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
47+
<a href="#" class="jcarousel-control-next">&rsaquo;</a>
4148
</div>
4249
<hr />
4350
<div>
@@ -88,5 +95,13 @@
8895
}).jcarouselAutoscroll({
8996
interval: 7500
9097
});
98+
99+
$('.jcarousel-control-prev').jcarouselControl({
100+
target: '-=1'
101+
});
102+
103+
$('.jcarousel-control-next').jcarouselControl({
104+
target: '+=1'
105+
});
91106
});
92107
</script>

0 commit comments

Comments
 (0)