API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 4th, 2017
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.38 KB | None | 0 0
raw download clone embed print report
  1. <script>
  2. $('.product-carousel').slick({
  3.         lazyLoad: 'ondemand',
  4.         slidesToShow: 4,
  5.         slidesToScroll: 1,
  6.         nextArrow: '<i class="arrow right">',
  7.         prevArrow: '<i class="arrow left">',
  8.         infinite: true,
  9.         responsive: [
  10.             {
  11.                 breakpoint: 1024,
  12.                 settings: {
  13.                     slidesToShow: 3,
  14.                     slidesToScroll: 1,
  15.                     infinite: true,
  16.                 }
  17.             },
  18.             {
  19.                 breakpoint: 600,
  20.                 settings: {
  21.                     slidesToShow: 2,
  22.                     slidesToScroll: 1
  23.                 }
  24.             },
  25.             {
  26.                 breakpoint: 480,
  27.                 settings: {
  28.                     slidesToShow: 1,
  29.                     slidesToScroll: 1
  30.                 }
  31.             }
  32.             // You can unslick at a given breakpoint now by adding:
  33.             // settings: "unslick"
  34.             // instead of a settings object
  35.         ]
  36. });
  37. </script>
  38.  
  39. <style>
  40. @primary: #4a4a4a;
  41. @secondary: #ffffff;
  42. @tertiary: #000000;
  43. @arrow-size: 12px;
  44. @arrow-distance: 20px;
  45. @vertical-space: 10px;
  46. body {
  47.     margin: 0;
  48.     padding: 10px;
  49.     width: 100%;
  50.     height: 100%;
  51.     box-sizing: border-box;
  52. }
  53. .product-carousel-header {
  54.   background: @primary;
  55.     color: @secondary;
  56.   box-sizing: border-box;
  57.     font-family: "Open Sans", sans-serif;
  58.     padding: 10px 14px;
  59.     width: 100%;
  60. }
  61. .product-carousel {
  62.   background: @secondary;
  63.   border: 1px solid @primary;
  64.   box-sizing: border-box;
  65.     font-family: "Open Sans", sans-serif;
  66.     padding: 20px 40px;
  67.     width: 100%;
  68. }
  69. .product-carousel .product {
  70.     box-sizing: border-box;
  71.     margin: 0 10px;
  72.     text-align: center;
  73.     display: flex;
  74.     flex-flow: column;
  75.     align-content: space-between;
  76. }
  77. .product-carousel .product-top {
  78.     width: 100%;
  79. }
  80. .product-carousel p, .product-carousel .product-image, .product-carousel img.review-stars {
  81.     margin: 0 0 @vertical-space 0;
  82. }
  83. .product-carousel .product-image {
  84.     align-self: flex-start;
  85.     width: 100%;
  86. }
  87. img.review-stars {
  88.     width: 100px;
  89.     display: inline-block;
  90.     
  91. }
  92. .product-carousel .product-name {
  93.     font-weight: bold;
  94.     display: flex;
  95.     flex-flow: column wrap;
  96.     justify-content: flex-start;
  97.     width: 100%;
  98. }
  99. .product-carousel .product-bottom {
  100.     margin-top: auto;
  101.     align-items: flex-end;
  102. }
  103. .product-carousel .product-prices {
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     flex: 1 0 100%;
  107.     align-self: center;
  108. }
  109. .product-carousel .product-prices span {
  110.     width: 100%;
  111. }
  112. .product-carousel .product-prices span.price-was {
  113.     color: #a2a2a2;
  114.     text-decoration: line-through;
  115.     &:before {
  116.         content: 'Was ';
  117.     }
  118. }
  119. .product-carousel .product-prices span.price-save {
  120.     color: red;
  121.     &:before {
  122.         content: 'Save ';
  123.     }
  124. }
  125. .product-carousel .product-prices span.price-now {
  126.     font-weight: bold;
  127.     &:before {
  128.         content: 'Now ';
  129.     }
  130. }
  131. .product-carousel button.shop-now {
  132.   border:none;
  133.   background-image:none;
  134.   background-color:@primary;
  135.     color: @secondary;
  136.   box-shadow: none;
  137.       -webkit-box-shadow: none;
  138.       -moz-box-shadow: none;
  139.     font-size: 16px;
  140.     padding: 8px 10px;
  141.     align-self: center;
  142. }
  143. /** ARROWS **/
  144. i {
  145.   border: solid @tertiary;
  146.   border-width: 0 2px 2px 0;
  147.   display: inline-block;
  148.   padding: @arrow-size;
  149.     position: absolute;
  150.     top: calc(50% - @arrow-size/2);
  151.     cursor: pointer;
  152. }
  153. .right {
  154.     right: @arrow-distance;
  155.   transform: rotate(-45deg);
  156.     -webkit-transform: rotate(-45deg);
  157. }
  158. .left {
  159.     left: @arrow-distance;
  160.   transform: rotate(135deg);
  161.     -webkit-transform: rotate(135deg);
  162. }
  163. /** SLICK SLIDER CSS **/
  164. /* Slider */
  165. .slick-slider
  166. {
  167.   position: relative;
  168.   -moz-box-sizing: border-box;
  169.        box-sizing: border-box;
  170.   -webkit-user-select: none;
  171.      -moz-user-select: none;
  172.       -ms-user-select: none;
  173.           user-select: none;
  174.   -webkit-touch-callout: none;
  175.   -khtml-user-select: none;
  176.   -ms-touch-action: pan-y;
  177.       touch-action: pan-y;
  178.   -webkit-tap-highlight-color: transparent;
  179. }
  180. .slick-list
  181. {
  182.   position: relative;
  183.   overflow: hidden;
  184.   margin: 0;
  185.   padding: 0;
  186. }
  187. .slick-list:focus
  188. {
  189.   outline: none;
  190. }
  191. .slick-list.dragging
  192. {
  193.   cursor: pointer;
  194.   cursor: hand;
  195. }
  196. .slick-slider .slick-track,
  197. .slick-slider .slick-list
  198. {
  199.   -webkit-transform: translate3d(0, 0, 0);
  200.      -moz-transform: translate3d(0, 0, 0);
  201.       -ms-transform: translate3d(0, 0, 0);
  202.        -o-transform: translate3d(0, 0, 0);
  203.           transform: translate3d(0, 0, 0);
  204. }
  205. .slick-track
  206. {
  207.     display: flex;
  208.   position: relative;
  209.   top: 0;
  210.   left: 0;
  211. }
  212. .slick-loading .slick-track
  213. {
  214.   visibility: hidden;
  215. }
  216. [dir='rtl'] .slick-slide
  217. {
  218.   float: right;
  219. }
  220. .slick-slide.slick-loading img
  221. {
  222.   display: none;
  223. }
  224. .slick-slide.dragging img
  225. {
  226.   pointer-events: none;
  227. }
  228. .slick-loading .slick-slide
  229. {
  230.   visibility: hidden;
  231. }
  232. .slick-vertical .slick-slide
  233. {
  234.   height: auto;
  235.   border: 1px solid transparent;
  236. }
  237. .slick-arrow.slick-hidden {
  238.   display: none;
  239. }
  240. </style>
  241.  
  242.  
  243.  
  244. <div class="product-carousel-header">PRODUCT CAROUSEL HEADER</div>
  245. <div class="product-carousel">
  246.   <div class="product">
  247.     <div class="product-top">
  248.       <img class="product-image" src="https://www.placehold.it/300x300" />
  249.       <!--div class="product-name">
  250.         <p>Product Name</p>
  251.       </div-->
  252.     </div>
  253.     <div class="product-bottom">
  254.       <p class="product-prices">
  255.         <span class="price-was">£22.00</span>
  256.         <span class="price-save">£10.00</span>
  257.         <span class="price-now">£12.00</span>
  258.       </p>
  259.       <button class="shop-now">Shop Now</button>
  260.     </div>
  261.   </div>
  262.   <div class="product">
  263.     <div class="product-top">
  264.       <img class="product-image" src="https://www.placehold.it/300x300" />
  265.             <!--div class="product-name">
  266.             <p>Product Name</p>
  267.       </div-->
  268.     </div>
  269.     <div class="product-bottom">
  270.       <p class="product-prices">
  271.         <span class="price">£12.00</span>
  272.       </p>
  273.       <button class="shop-now">Shop Now</button>
  274.     </div>
  275.   </div>
  276.   <div class="product">
  277.     <div class="product-top">
  278.       <img class="product-image" src="https://www.placehold.it/300x300" />
  279.       <img class="review-stars" src="http://www.yehdekh.com/wp-content/uploads/2016/04/stars.png" />
  280.       <!--iv class="product-name">
  281.         <p>Product Name That Could Be Really Long</p>
  282.       </div-->
  283.     </div>
  284.     <div class="product-bottom">
  285.       <p class="product-prices">
  286.         <span class="price-was">£22.00</span>
  287.         <span class="price-save">£10.00</span>
  288.         <span class="price-now">£12.00</span>
  289.       </p>
  290.       <button class="shop-now">Shop Now</button>
  291.     </div>
  292.   </div>
  293.   <div class="product">
  294.     <div class="product-top">
  295.       <img class="product-image" src="https://www.placehold.it/300x300" />
  296.       <!--div class="product-name">
  297.         <p>Product Name That Could Be Even Longer Than The Previous One</p>
  298.       </div-->
  299.     </div>
  300.     <div class="product-bottom">
  301.       <p class="product-prices">
  302.         <span class="price-was">£22.00</span>
  303.         <span class="price-save">£10.00</span>
  304.         <span class="price-now">£12.00</span>
  305.       </p>
  306.       <button class="shop-now">Shop Now</button>
  307.     </div>
  308.   </div>
  309.   <div class="product">
  310.     <div class="product-top">
  311.       <img class="product-image" src="https://www.placehold.it/300x300" />
  312.             <!--div class="product-name">
  313.             <p>Product Name</p>
  314.       </div-->
  315.     </div>
  316.     <div class="product-bottom">
  317.       <p class="product-prices">
  318.         <span class="price">£12.00</span>
  319.       </p>
  320.       <button class="shop-now">Shop Now</button>
  321.     </div>
  322.   </div>
  323.     <div class="product">
  324.     <div class="product-top">
  325.       <img class="product-image" src="https://www.placehold.it/300x300" />
  326.       <!--div class="product-name">
  327.         <p>Product Name</p>
  328.       </div-->
  329.     </div>
  330.     <div class="product-bottom">
  331.       <p class="product-prices">
  332.         <span class="price-was">£22.00</span>
  333.         <span class="price-save">£10.00</span>
  334.         <span class="price-now">£12.00</span>
  335.       </p>
  336.       <button class="shop-now">Shop Now</button>
  337.     </div>
  338.   </div>
  339.   <div class="product">
  340.     <div class="product-top">
  341.       <img class="product-image" src="https://www.placehold.it/300x300" />
  342.             <!--div class="product-name">
  343.             <p>Product Name</p>
  344.       </div-->
  345.     </div>
  346.     <div class="product-bottom">
  347.       <p class="product-prices">
  348.         <span class="price">£12.00</span>
  349.       </p>
  350.       <button class="shop-now">Shop Now</button>
  351.     </div>
  352.   </div>
  353.   <div class="product">
  354.     <div class="product-top">
  355.       <img class="product-image" src="https://www.placehold.it/300x300" />
  356.       <img class="review-stars" src="http://www.yehdekh.com/wp-content/uploads/2016/04/stars.png" />
  357.       <!--iv class="product-name">
  358.         <p>Product Name That Could Be Really Long</p>
  359.       </div-->
  360.     </div>
  361.     <div class="product-bottom">
  362.       <p class="product-prices">
  363.         <span class="price-was">£22.00</span>
  364.         <span class="price-save">£10.00</span>
  365.         <span class="price-now">£12.00</span>
  366.       </p>
  367.       <button class="shop-now">Shop Now</button>
  368.     </div>
  369.   </div>
  370.   <div class="product">
  371.     <div class="product-top">
  372.       <img class="product-image" src="https://www.placehold.it/300x300" />
  373.       <!--div class="product-name">
  374.         <p>Product Name That Could Be Even Longer Than The Previous One</p>
  375.       </div-->
  376.     </div>
  377.     <div class="product-bottom">
  378.       <p class="product-prices">
  379.         <span class="price-was">£22.00</span>
  380.         <span class="price-save">£10.00</span>
  381.         <span class="price-now">£12.00</span>
  382.       </p>
  383.       <button class="shop-now">Shop Now</button>
  384.     </div>
  385.   </div>
  386.   <div class="product">
  387.     <div class="product-top">
  388.       <img class="product-image" src="https://www.placehold.it/300x300" />
  389.             <!--div class="product-name">
  390.             <p>Product Name</p>
  391.       </div-->
  392.     </div>
  393.     <div class="product-bottom">
  394.       <p class="product-prices">
  395.         <span class="price">£12.00</span>
  396.       </p>
  397.       <button class="shop-now">Shop Now</button>
  398.     </div>
  399.   </div>
  400. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!