API tools faq
paste
Advertisement
RehabCZ

NonBootstrap Carousel

RehabCZ
Aug 7th, 2023
509
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.29 KB | Source Code | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3.     <div class="document-center">
  4.       <!--This carousel-container only exists so we can do the
  5.      aspect ratio tricks in CSS-->
  6.       <div class="carousel-container">
  7.         <div class="carousel" id="carousel-1" auto-scroll="7000">
  8.           <!--The uppermost screen will appear first. This is due to JavaScript-->
  9.           <section class="carousel-screen">
  10.             <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago Band" />
  11.             <section class="text-container">
  12.               <p>Chicago</p>
  13.               <p>Thank you, Chicago!</p>
  14.             </section>
  15.           </section>
  16.           <section class="carousel-screen">
  17.             <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" />
  18.             <section class="text-container">
  19.               <p>New York</p>
  20.               <p>We love the Big Apple!</p>
  21.             </section>
  22.           </section>
  23.           <section class="carousel-screen">
  24.             <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" />
  25.             <section class="text-container">
  26.               <p>Los Angeles</p>
  27.               <p>LA is always so much fun!</p>
  28.             </section>
  29.           </section>
  30.           <!--These are not screens. They will always be on carousel-->
  31.           <section class="circle-container">
  32.             <!--These 'circles' need to match the number of carousel screens-->
  33.             <div class="circle"></div>
  34.             <div class="circle"></div>
  35.             <div class="circle"></div>
  36.           </section>
  37.           <div class="left-arrow">
  38.             <span class="chevron left"></span>
  39.           </div>
  40.           <div class="right-arrow">
  41.             <span class="chevron right"></span>
  42.           </div>
  43.         </div>
  44.       </div>
  45.     </div>
  46.   </body>
  47. </html>
  48.  
  49.  
  50. <style>
  51. * {
  52.   margin: 0;
  53.   padding: 0;
  54.   box-sizing: border-box;
  55.   font-family: "Open Sans", sans-serif;
  56. }
  57.  
  58. body {
  59.   background-color: #f2f2f2;
  60. }
  61.  
  62. .document-center {
  63.   position: absolute;
  64.   width: 100%;
  65.   height: 100%;
  66.   display: flex;
  67.   justify-content: center;
  68.   align-items: center;
  69. }
  70.  
  71. /*We do this because the carousel needs to be 100% width
  72. in order for the aspect ratio trick to work*/
  73. .carousel-container {
  74.   max-width: 980px;
  75.   width: 95%;
  76. }
  77.  
  78. /*This is the actual carousel. Overflow hidden acts as a mask*/
  79.  
  80. .carousel {
  81.   position: relative;
  82.   width: 100%;
  83.   /*Width of image is 980px. Height is 570px.*/
  84.   padding-top: calc(570 / 980 * 100%);
  85.   overflow: hidden;
  86. }
  87.  
  88. .carousel-container img {
  89.   position: absolute;
  90.   top: 0;
  91.   left: 0;
  92.   width: 100%;
  93.   height: 100%;
  94. }
  95.  
  96. .left-arrow {
  97.   position: absolute;
  98.   display: flex;
  99.   justify-content: center;
  100.   align-items: center;
  101.   top: 0;
  102.   left: 0;
  103.   height: 100%;
  104.   width: 147px;
  105.   cursor: pointer;
  106. }
  107.  
  108. .left-arrow:hover {
  109.   background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  110. }
  111.  
  112. .left-arrow:hover .chevron,
  113. .right-arrow:hover .chevron {
  114.   border-color: #e6e6e6;
  115. }
  116.  
  117. .right-arrow {
  118.   position: absolute;
  119.   display: flex;
  120.   justify-content: center;
  121.   align-items: center;
  122.   top: 0;
  123.   right: 0;
  124.   height: 100%;
  125.   width: 147px;
  126.   cursor: pointer;
  127. }
  128.  
  129. .right-arrow:hover {
  130.   background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  131. }
  132.  
  133. .chevron {
  134.   width: 25px;
  135.   height: 25px;
  136.   border: solid rgba(255, 255, 255, 0.5);
  137.   border-width: 10px 10px 0 0;
  138. }
  139.  
  140. .chevron.right {
  141.   transform: rotate(45deg);
  142. }
  143.  
  144. .chevron.left {
  145.   transform: rotate(-135deg);
  146. }
  147.  
  148. .circle-container {
  149.   position: absolute;
  150.   display: flex;
  151.   justify-content: center;
  152.   align-items: start;
  153.   bottom: 0;
  154.   left: 0;
  155.   width: 100%;
  156.   height: 45px;
  157. }
  158.  
  159. .circle {
  160.   border: 1px solid white;
  161.   width: 12px;
  162.   height: 12px;
  163.   border-radius: 50%;
  164.   margin: 0 5px;
  165.   cursor: pointer;
  166. }
  167.  
  168. .circle-fill {
  169.   background-color: white;
  170. }
  171.  
  172. .text-container {
  173.   position: absolute;
  174.   display: flex;
  175.   flex-direction: column;
  176.   justify-content: start;
  177.   align-items: center;
  178.   bottom: 45px;
  179.   left: 0;
  180.   width: 100%;
  181.   color: white;
  182.   text-shadow: 1px 1px black;
  183.   text-align: center;
  184. }
  185.  
  186. .text-container p:nth-child(1) {
  187.   margin: 10px 100px;
  188.   font-size: 1.5em;
  189. }
  190.  
  191. .text-container p:nth-child(2) {
  192.   margin: 10px 100px 20px 100px;
  193. }
  194.  
  195. .carousel-screen {
  196.   position: absolute;
  197.   top: 0;
  198.   left: 0;
  199.   width: 100%;
  200.   height: 100%;
  201. }
  202.  
  203. /* Animations */
  204. @keyframes toRight {
  205.   0% {
  206.     left: 0;
  207.   }
  208.   100% {
  209.     left: 100%;
  210.   }
  211. }
  212.  
  213. @keyframes toLeft {
  214.   0% {
  215.     left: 0;
  216.   }
  217.   100% {
  218.     left: -100%;
  219.   }
  220. }
  221.  
  222. @keyframes comeRight {
  223.   0% {
  224.     left: 100%;
  225.   }
  226.   100% {
  227.     left: 0;
  228.   }
  229. }
  230.  
  231. @keyframes comeLeft {
  232.   0% {
  233.     left: -100%;
  234.   }
  235.   100% {
  236.     left: 0;
  237.   }
  238. }
  239.  
  240. </style>
  241.  
  242. <script>
  243. //Right Arrow & Left Arrow
  244. let rightArrow = document.querySelector("#carousel-1 .right-arrow");
  245. let leftArrow = document.querySelector("#carousel-1 .left-arrow");
  246. //List of all of the screens in carousel
  247. let screenStore = document.querySelectorAll("#carousel-1 .carousel-screen");
  248. let numOfScreens = screenStore.length;
  249. //List of all the circle stores
  250. let circleStore = document.querySelectorAll("#carousel-1 .circle-container .circle");
  251. //number to target main screen
  252. let currentScreen = 0;
  253. //currently in animation or not
  254. let inAnim = false;
  255. //Animation Time
  256. let animTime = 500;
  257.  
  258. //Sort out starting position
  259. sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  260. //Sort out circle styling
  261. highlightCircle(circleStore[0]);
  262.  
  263. //User clicks on rightArrow
  264. rightArrow.addEventListener("click", () => {
  265.     startAnim("right");
  266. });
  267.  
  268. //User clicks on the leftArrow
  269. leftArrow.addEventListener("click", () => {
  270.     startAnim("left");
  271. });
  272.  
  273. //Start animation. Either towards left or right
  274. function startAnim(direction) {
  275.     if(!inAnim) {
  276.         inAnim = true;
  277.         if(direction === "right") {
  278.             moveRight();
  279.             highlightCircle(circleStore[currentScreen + 1], "right");
  280.         }else if(direction === "left"){
  281.             moveLeft();
  282.             highlightCircle(circleStore[currentScreen - 1], "left");
  283.         }else{
  284.             isAnim = false;
  285.             return
  286.         }
  287.     }
  288. }
  289.  
  290. //Move to the right
  291. function moveRight() {
  292.     //Move towards Next screen as usual
  293.     if(currentScreen < numOfScreens - 1){
  294.    toLeft(screenStore[currentScreen]);
  295.    comeRight(screenStore[currentScreen + 1]);
  296.    setTimeout(() => {
  297.         inAnim = false;
  298.         currentScreen++;
  299.         sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  300.     }, animTime)
  301.     }else{
  302.         //Or the screen coming in is the first screen again
  303.         toLeft(screenStore[currentScreen]);
  304.         comeRight(screenStore[0]);
  305.         setTimeout(() => {
  306.             inAnim = false;
  307.             currentScreen = 0;
  308.             sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  309.         }, animTime)
  310.     }
  311. }
  312.  
  313. //Move to the left
  314. function moveLeft() {
  315.     //Move back to screen previously on, as usual
  316.     if(currentScreen > 0){
  317.         toRight(screenStore[currentScreen]);
  318.         comeLeft(screenStore[currentScreen - 1]);
  319.         setTimeout(() => {
  320.         inAnim = false;
  321.         currentScreen--;
  322.         sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  323.         }, animTime)
  324.     }else{
  325.         //Move back to the last screen container
  326.         toRight(screenStore[currentScreen]);
  327.         comeLeft(screenStore[numOfScreens - 1]);
  328.         setTimeout(() => {
  329.             inAnim = false;
  330.             currentScreen = numOfScreens - 1;
  331.             sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  332.             }, animTime)
  333.     }
  334. }
  335.  
  336. //User clicks on one of the circles
  337. circleStore.forEach(circle => {
  338.     circle.addEventListener("click", event => {
  339.         if(!inAnim){
  340.         //Convert NodeList to Array, to use 'indexOf' method.
  341.         let circleStoreArray = Array.prototype.slice.call(circleStore);
  342.         let circleIndex = circleStoreArray.indexOf(event.target);
  343.         //Configure circle styling
  344.         highlightCircle(event.target);
  345.         //Work out whether we need to move right or left, or nowhere.
  346.         if(circleIndex > currentScreen){
  347.             changeScreenCircleClick(circleIndex, "right");
  348.         }else if (circleIndex < currentScreen){
  349.            changeScreenCircleClick(circleIndex, "left");
  350.        }
  351.    }
  352. })
  353. })
  354.  
  355. function changeScreenCircleClick(circleIndex, direction) {
  356.    inAnim = true;
  357.    if(direction === "right"){
  358.        sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[circleIndex]);
  359.        toLeft(screenStore[currentScreen]);
  360.        comeRight(screenStore[circleIndex]);
  361.    }else if (direction === "left"){
  362.        sortPositioning(screenStore[currentScreen], screenStore[circleIndex], screenStore[currentScreen + 1]);
  363.        toRight(screenStore[currentScreen]);
  364.        comeLeft(screenStore[circleIndex]);
  365.    }else{
  366.        inAnim = false;
  367.        return
  368.    }
  369.    setTimeout(() => {
  370.     inAnim = false;
  371.     currentScreen = circleIndex;
  372.     sortPositioning(screenStore[currentScreen], screenStore[currentScreen - 1], screenStore[currentScreen + 1]);
  373.     }, animTime)
  374. }
  375.  
  376. function highlightCircle(circleSelect, direction) {
  377.     if(circleSelect === undefined && direction === "right"){
  378.        circleSelect = circleStore[0];
  379.     }else if (circleSelect === undefined && direction === "left"){
  380.        circleSelect = circleStore[numOfScreens - 1];
  381.     }
  382.     circleStore.forEach(circle => {
  383.         if(circle === circleSelect){
  384.             circle.classList.add("circle-fill");
  385.         }else{
  386.             circle.classList.remove("circle-fill");
  387.         }
  388.     })
  389. }
  390.  
  391.  
  392. //Animation methods
  393. function toLeft(screen) {
  394.     screen.style.animation = "toLeft 0.5s ease-in-out forwards";
  395.     setTimeout(() => {
  396.         screen.style.animation = "";
  397.     }, animTime);
  398. }
  399.  
  400. function toRight(screen) {
  401.     screen.style.animation = "toRight 0.5s ease-in-out forwards";
  402.     setTimeout(() => {
  403.         screen.style.animation = "";
  404.     }, animTime);
  405. }
  406.  
  407. function comeRight(screen) {
  408.     screen.style.animation = "comeRight 0.5s ease-in-out forwards";
  409.     setTimeout(() => {
  410.         screen.style.animation = "";
  411.     }, animTime);
  412. }
  413.  
  414. function comeLeft(screen) {
  415.     screen.style.animation = "comeLeft 0.5s ease-in-out forwards";
  416.     setTimeout(() => {
  417.         screen.style.animation = "";
  418.     }, animTime);
  419. }
  420.  
  421.  
  422.  
  423. //Sort positioning. Don't want images to overlap
  424. function sortPositioning(mainScreen, leftScreen, rightScreen) {
  425.     //If right screen is undefined. We need to repeat first screen again
  426.     if(rightScreen === undefined){
  427.         rightScreen = screenStore[0];
  428.     }
  429.     //If left screen is undefined. We use the last screen
  430.     if(leftScreen === undefined){
  431.         leftScreen = screenStore[numOfScreens - 1];
  432.     }
  433.     screenStore.forEach(screen => {
  434.         if(screen === mainScreen){
  435.             screen.style.display = "block";
  436.             screen.style.left = "0px";
  437.         }else if (screen === leftScreen){
  438.             screen.style.display = "block";
  439.             screen.style.left = "-100%";
  440.         }else if (screen === rightScreen){
  441.             screen.style.display = "block";
  442.             screen.style.left = "100%";
  443.         }else{
  444.             screen.style.display = "none";
  445.         }
  446.     })
  447. }
  448.  
  449. //Auto Scroll feature
  450. let carousel = document.getElementById("carousel-1");
  451. let scrollTime = Number(carousel.getAttribute("auto-scroll"));
  452. //Only implement the feature if the user has included the attribute 'auto-scroll'.
  453. if(scrollTime) {
  454.     //Auto Scroll will be set up the very first time
  455.     let autoWipe = setInterval(() => {
  456.         startAnim("right");
  457.     }, scrollTime);
  458.     //Clear the timer when they hover on carousel
  459.     carousel.addEventListener("mouseenter", () => {
  460.         clearInterval(autoWipe);
  461.     });
  462.     //Re-initialise the timer when they hover out of the carousel
  463.     carousel.addEventListener("mouseleave", () => {
  464.          autoWipe = setInterval(() => {
  465.             startAnim("right");
  466.         }, scrollTime);
  467.     })
  468.  
  469. }
  470. </script>
Tags: html CSS js bootstrap carousel
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!