API tools faq
paste
Advertisement
NikolayBezay

Untitled

NikolayBezay
May 2nd, 2023
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.83 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. #adoric_smartbox_870f53c7e844d .adoric_element.element-embed.responsive-carousel {
  3. width: auto !important;
  4. height: auto !important;
  5. position: absolute !important;
  6. left: 50% !important;
  7. transform: translate(-50%, 0) !important;
  8. top: 0 !important;
  9. }
  10. #adoric_smartbox_870f53c7e844d .ant-carousel {
  11. top: -30px;
  12. margin: 50px auto;
  13. padding-top: 10px;
  14. padding-bottom: 10px;
  15. border: 1px solid #ccd;
  16. background-color: white;
  17. width: auto;
  18. position: relative;
  19. flex-direction: column;
  20. justify-content: center;
  21. display: flex;
  22. }
  23. @media screen and (min-width: 911px) {
  24. #adoric_smartbox_870f53c7e844d .ant-carousel {
  25. width: 810px;
  26. height: 266px;
  27. }
  28. }
  29. @media screen and (min-width: 641px) and (max-width: 910px) {
  30. #adoric_smartbox_870f53c7e844d .ant-carousel {
  31. width: 540px;
  32. height: 266px;
  33. }
  34. }
  35. @media screen and (max-width: 640px) {
  36. #adoric_smartbox_870f53c7e844d .ant-carousel {
  37. width: 270px;
  38. height: 266px;
  39. }
  40. }
  41. #adoric_smartbox_870f53c7e844d.ant-carousel-display-none {
  42. display: none;
  43. }
  44. #adoric_smartbox_870f53c7e844d .ant-carousel-element {
  45. width: 270px;
  46. text-align: center;
  47. display: block;
  48. flex: 0 0 auto;
  49. display: flex;
  50. flex-direction: column;
  51. align-items: center;
  52. }
  53. #adoric_smartbox_870f53c7e844d .ant-carousel-hider {
  54. overflow: hidden;
  55. }
  56. #adoric_smartbox_870f53c7e844d .ant-carousel-list {
  57. width: auto;
  58. margin: 0;
  59. padding: 0;
  60. list-style-type: none;
  61. display: flex;
  62. flex-direction: row;
  63. }
  64. #adoric_smartbox_870f53c7e844d .carousel-item-customm-btn {
  65. width: 220px !important;
  66. font-size: 13px !important;
  67. padding: 20px !important;
  68. }
  69. #adoric_smartbox_870f53c7e844d .carousel-item-customm-out-of-stock {
  70. background-color: transparent !important;
  71. color: rgb(52 48 61) !important;
  72. border: rgb(52 48 61) !important;
  73. pointer-events: none !important;
  74. }
  75. #adoric_smartbox_870f53c7e844d .carousel-item-customm-out-of-stock::after {
  76. display: none !important;
  77. }
  78. #adoric_smartbox_870f53c7e844d div.ant-carousel-arrow-left {
  79. width: 22px;
  80. height: 40px;
  81. position: absolute;
  82. cursor: pointer;
  83. opacity: 0.6;
  84. z-index: 32;
  85. left: -40px;
  86. top: 40%;
  87. display: block;
  88. background: url(https://storage.googleapis.com/adoric-user-images/956c05bf-3272-4205-a333-8384eb288460.svg) center/cover no-repeat;
  89. }
  90. #adoric_smartbox_870f53c7e844d div.ant-carousel-arrow-right {
  91. width: 22px;
  92. height: 40px;
  93. position: absolute;
  94. cursor: pointer;
  95. opacity: 0.6;
  96. z-index: 32;
  97. right: -40px;
  98. top: 40%;
  99. display: block;
  100. background: url(https://storage.googleapis.com/adoric-user-images/8c68a159-2b08-4116-8824-4f278540e091.svg) center/cover no-repeat;
  101. }
  102. #adoric_smartbox_870f53c7e844d div.ant-carousel-arrow-left:hover {
  103. opacity: 1.0;
  104. }
  105. #adoric_smartbox_870f53c7e844d div.ant-carousel-arrow-right:hover {
  106. opacity: 1.0;
  107. }
  108. #adoric_smartbox_870f53c7e844d div.ant-carousel-dots {
  109. width: 100%;
  110. height: auto;
  111. position: absolute;
  112. left: 0;
  113. bottom: -30px;
  114. z-index: 30;
  115. text-align: center;
  116. display: none;
  117. }
  118. #adoric_smartbox_870f53c7e844d span.ant-dot {
  119. width: 10px;
  120. height: 10px;
  121. margin: 5px 7px;
  122. padding: 0;
  123. display: inline-block;
  124. background-color: #BBB;
  125. border-radius: 5px;
  126. cursor: pointer;
  127. }
  128. </style>
  129. <div class="ant-carousel">
  130. <div class="ant-carousel-hider">
  131. <div class="ant-carousel-list"></div>
  132. </div>
  133. <div class="ant-carousel-arrow-left"></div>
  134. <div class="ant-carousel-arrow-right"></div>
  135. <div class="ant-carousel-dots"></div>
  136. </div>
  137. <script>
  138. (function() {
  139. (function() {
  140. const productsArr = [];
  141. for (let productItem = 1; productItem <= 8; productItem++) {
  142. productsArr.push({
  143. 'title': `title ${productItem}`,
  144. 'description': `description ${productItem}`,
  145. 'price': `price ${productItem}`
  146. });
  147. }
  148. let out = '';
  149. for (let i of productsArr) {
  150. out += `<div class="ant-carousel-element"><img src="https://apod.nasa.gov/apod/image/1310/IMG_0228dakotalapse.jpg" width="200px" height="200px"><div>${i.title}</div><div>${i.description}</div><div>${i.price}</div></div>`;
  151. }
  152. document.querySelector('.ant-carousel-list').innerHTML = out;
  153. carousel();
  154. })();
  155. function carousel() {
  156. /* Carousel elements */
  157. const CRSL_CONTAINER = document.querySelector('.ant-carousel');
  158. const CRSL_LIST = CRSL_CONTAINER.querySelector('.ant-carousel-list');
  159. const CRSL_ITEMS = CRSL_LIST.querySelectorAll('.ant-carousel-element');
  160. const CRSL_FIRST_ITEM = CRSL_LIST.querySelector('.ant-carousel-element');
  161. const LEFT_ARROW = CRSL_CONTAINER.querySelector('div.ant-carousel-arrow-left');
  162. const RIGHT_ARROW = CRSL_CONTAINER.querySelector('div.ant-carousel-arrow-right');
  163. const DOTS_INDICATOR = CRSL_CONTAINER.querySelector('div.ant-carousel-dots'); /* carousel functionality */
  164. const CAROUSEL_PARAMETERS = {
  165. elemVisible: 1,
  166. loop: true,
  167. auto: true,
  168. interval: 8000,
  169. speed: 750,
  170. touch: true,
  171. arrows: true,
  172. dots: true,
  173. vertical: false,
  174. quantityItemVertical: 3
  175. }; /* element quantity */
  176. let elemCount = CRSL_ITEMS.length; /* visible dots quantity */
  177. let dotsVisible = elemCount;
  178. let elemStyle = window.getComputedStyle(CRSL_FIRST_ITEM); /* element width with margins */
  179. let elemWidth = parseInt(elemStyle.width) + parseInt(elemStyle.marginLeft) + parseInt(elemStyle.marginRight);
  180. let currentElement = 0;
  181. let currentOffset = 0;
  182. let touchPrev = true;
  183. let touchNext = true;
  184. let autoScroll;
  185. let DOTS_INDICATOR_All; /* create crsl functionality */
  186. (function() {
  187. let xTouch, yTouch, xDiff, yDiff, stTime, mvTime;
  188. let bgTime = getTime(); /* disable navigation */
  189. if (elemCount <= CAROUSEL_PARAMETERS.elemVisible) {
  190. CAROUSEL_PARAMETERS.auto = false;
  191. CAROUSEL_PARAMETERS.touch = false;
  192. CAROUSEL_PARAMETERS.arrows = false;
  193. CAROUSEL_PARAMETERS.dots = false;
  194. LEFT_ARROW.style.display = 'none';
  195. RIGHT_ARROW.style.display = 'none'
  196. }; /* if crsl is not infinite */
  197. if (!CAROUSEL_PARAMETERS.loop) {
  198. dotsVisible = elemCount - CAROUSEL_PARAMETERS.elemVisible + 1;
  199. LEFT_ARROW.style.display = 'none';
  200. touchPrev = false;
  201. CAROUSEL_PARAMETERS.auto = false;
  202. } /* crsl auto run */
  203. else if (CAROUSEL_PARAMETERS.auto) {
  204. setAutoScroll();
  205. CRSL_LIST.addEventListener('mouseenter', function() {
  206. clearInterval(autoScroll)
  207. }, false);
  208. CRSL_LIST.addEventListener('mouseleave', setAutoScroll, false)
  209. }; /* crsl on touch event */
  210. if (CAROUSEL_PARAMETERS.touch) {
  211. CRSL_LIST.addEventListener('touchstart', function(e) {
  212. xTouch = parseInt(e.touches[0].clientX);
  213. yTouch = parseInt(e.touches[0].clientY);
  214. stTime = getTime()
  215. }, false);
  216. CRSL_LIST.addEventListener('touchmove', function(e) {
  217. if (!xTouch || !yTouch) {
  218. return;
  219. }
  220. xDiff = xTouch - parseInt(e.touches[0].clientX);
  221. yDiff = yTouch - parseInt(e.touches[0].clientY);
  222. mvTime = getTime();
  223. if (Math.abs(xDiff) > 15 && Math.abs(xDiff) > Math.abs(yDiff) && mvTime - stTime < 75) {
  224. stTime = 0;
  225. if (touchNext && xDiff > 0) {
  226. bgTime = mvTime;
  227. elemNext();
  228. } else if (touchPrev && xDiff < 0) {
  229. bgTime = mvTime;
  230. elemPrev();
  231. }
  232. }
  233. }, false)
  234. }; /* crsl on vertical event */
  235. if (CAROUSEL_PARAMETERS.vertical) {
  236. const WIDTH_ITEM = 270;
  237. const CURRENT_WIDTH = WIDTH_ITEM * CAROUSEL_PARAMETERS.quantityItemVertical + 'px';
  238. let styleDirection = document.createElement("style");
  239. styleDirection.innerText = `.adoric_element.element-embed.responsive-carousel, .ant-carousel-element{transform: rotate(-90deg);} .ant-carousel{transform: rotate(90deg); width: ${CURRENT_WIDTH} !important;}`;
  240. document.body.appendChild(styleDirection);
  241. }; /* crsl on arrow click event */
  242. if (CAROUSEL_PARAMETERS.arrows) {
  243. if (!CAROUSEL_PARAMETERS.loop) {
  244. CRSL_LIST.style.cssText = 'transition:margin ' + CAROUSEL_PARAMETERS.speed + 'ms ease;';
  245. }
  246. LEFT_ARROW.addEventListener('click', function() {
  247. let fnTime = getTime();
  248. if (fnTime - bgTime > CAROUSEL_PARAMETERS.speed) {
  249. bgTime = fnTime;
  250. elemPrev();
  251. }
  252. }, false);
  253. RIGHT_ARROW.addEventListener('click', function() {
  254. let fnTime = getTime();
  255. if (fnTime - bgTime > CAROUSEL_PARAMETERS.speed) {
  256. bgTime = fnTime;
  257. elemNext();
  258. }
  259. }, false)
  260. } else {
  261. LEFT_ARROW.style.display = 'none';
  262. RIGHT_ARROW.style.display = 'none'
  263. }; /* create dots navigation */
  264. if (CAROUSEL_PARAMETERS.dots) {
  265. let sum = '';
  266. let diffNum;
  267. for (let i = 0; i < dotsVisible; i++) {
  268. sum += '<span class="ant-dot"></span>';
  269. };
  270. DOTS_INDICATOR.innerHTML = sum;
  271. DOTS_INDICATOR_All = CRSL_CONTAINER.querySelectorAll('span.ant-dot'); /* dot click event */
  272. for (let n = 0; n < dotsVisible; n++) {
  273. DOTS_INDICATOR_All[n].addEventListener('click', function() {
  274. diffNum = Math.abs(n - currentElement);
  275. if (n < currentElement) {
  276. bgTime = getTime();
  277. elemPrev(diffNum);
  278. } else if (n > currentElement) {
  279. bgTime = getTime();
  280. elemNext(diffNum);
  281. }
  282. }, false);
  283. }; /* first dot is off other are active */
  284. dotOff(0);
  285. for (let i = 1; i < dotsVisible; i++) {
  286. dotOn(i);
  287. }
  288. }
  289. function getTime() {
  290. return new Date().getTime();
  291. };
  292. function setAutoScroll() {
  293. autoScroll = setInterval(function() {
  294. let fnTime = getTime();
  295. if (fnTime - bgTime + 10 > CAROUSEL_PARAMETERS.interval) {
  296. bgTime = fnTime;
  297. elemNext();
  298. }
  299. }, CAROUSEL_PARAMETERS.interval)
  300. };
  301. })();
  302. function elemPrev(num) {
  303. num = num || 1;
  304. if (CAROUSEL_PARAMETERS.dots) {
  305. dotOn(currentElement);
  306. }
  307. currentElement -= num;
  308. if (currentElement < 0) {
  309. currentElement = dotsVisible - 1;
  310. }
  311. if (CAROUSEL_PARAMETERS.dots) {
  312. dotOff(currentElement);
  313. } /* move carousel to the right side. NOT Infinite carousel */
  314. if (!CAROUSEL_PARAMETERS.loop) {
  315. currentOffset += elemWidth * num;
  316. CRSL_LIST.style.marginLeft = currentOffset + 'px';
  317. if (currentElement == 0) {
  318. LEFT_ARROW.style.display = 'none';
  319. touchPrev = false;
  320. }
  321. RIGHT_ARROW.style.display = 'block';
  322. touchNext = true;
  323. } /* move carousel to the right side. Infinite carousel */
  324. else {
  325. let elm, buf;
  326. for (let i = 0; i < num; i++) {
  327. elm = CRSL_LIST.lastElementChild;
  328. buf = elm.cloneNode(true);
  329. CRSL_LIST.insertBefore(buf, CRSL_LIST.firstElementChild);
  330. CRSL_LIST.removeChild(elm);
  331. };
  332. CRSL_LIST.style.marginLeft = '-' + elemWidth * num + 'px';
  333. let compStyle = window.getComputedStyle(CRSL_LIST).marginLeft;
  334. CRSL_LIST.style.cssText = 'transition:margin ' + CAROUSEL_PARAMETERS.speed + 'ms ease;';
  335. CRSL_LIST.style.marginLeft = '0px';
  336. setTimeout(function() {
  337. CRSL_LIST.style.cssText = 'transition:none;'
  338. }, CAROUSEL_PARAMETERS.speed)
  339. }
  340. };
  341. function elemNext(num) {
  342. num = num || 1;
  343. if (CAROUSEL_PARAMETERS.dots) {
  344. dotOn(currentElement);
  345. }
  346. currentElement += num;
  347. if (currentElement >= dotsVisible) {
  348. currentElement = 0;
  349. }
  350. if (CAROUSEL_PARAMETERS.dots) {
  351. dotOff(currentElement);
  352. } /* move carousel to the left side. NOT Infinite carousel */
  353. if (!CAROUSEL_PARAMETERS.loop) {
  354. currentOffset -= elemWidth * num;
  355. CRSL_LIST.style.marginLeft = currentOffset + 'px';
  356. if (currentElement == dotsVisible - 1) {
  357. RIGHT_ARROW.style.display = 'none';
  358. touchNext = false;
  359. }
  360. LEFT_ARROW.style.display = 'block';
  361. touchPrev = true;
  362. } /* move carousel to the left side. Infinite carousel */
  363. else {
  364. let elm, buf;
  365. CRSL_LIST.style.cssText = 'transition:margin ' + CAROUSEL_PARAMETERS.speed + 'ms ease;';
  366. CRSL_LIST.style.marginLeft = '-' + elemWidth * num + 'px';
  367. setTimeout(function() {
  368. CRSL_LIST.style.cssText = 'transition:none;';
  369. for (let i = 0; i < num; i++) {
  370. elm = CRSL_LIST.firstElementChild;
  371. buf = elm.cloneNode(true);
  372. CRSL_LIST.appendChild(buf);
  373. CRSL_LIST.removeChild(elm)
  374. };
  375. CRSL_LIST.style.marginLeft = '0px'
  376. }, CAROUSEL_PARAMETERS.speed);
  377. }
  378. }
  379. function dotOn(num) {
  380. DOTS_INDICATOR_All[num].style.cssText = 'background-color:#BBB; cursor:pointer;'
  381. }
  382. function dotOff(num) {
  383. DOTS_INDICATOR_All[num].style.cssText = 'background-color:#556; cursor:default;'
  384. }
  385. }
  386. })();
  387. </script>
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!