Notifications
All Notifications

How To Design Or Create Marquee Logo Slider Using Only HTML And CSS

To create a marquee logo slider, you'll need to have some basic knowledge of HTML and CSS

A CSS marquee logo slider with auto play is a great way to showcase your brand or logo in a dynamic and eye-catching way. Essentially, this type of slider uses CSS animations to create a scrolling effect for a series of logos or images, and it can be set up to automatically play on a loop.

How To Create

To create a marquee logo slider, you'll need to have some basic knowledge of HTML and CSS. Here are the basic steps to get started:

  • Create an HTML container for your logo slider, using a div element with a class name that you can reference in your CSS.
  • Inside the container, create a series of img elements for each of the logos or images you want to display. Give each image a class name that you can reference in your CSS.
  • In your CSS, set up the container element with a fixed height and width, and set the overflow property to "hidden" to hide any logos that are outside the container.
  • Use CSS animations to create a scrolling effect for the logo images. This can be done by setting up a keyframe animation that moves the images from left to right or right to left, depending on your preference.
  • 5.Finally, use JavaScript to set up an auto-play function that will automatically start the animation and loop through the logos.
  • Here Is A HTML

     <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    
    	<article class="wrapper">
    		<div class="marquee">
    			<div class="marquee_group">
    				<i class="fa fa-adn"></i>
    				<i class="fa fa-amazon"></i>
    				<i class="fa fa-android"></i>
    				<i class="fa fa-apple"></i>
    				<i class="fa fa-bitcoin"></i>
    				<i class="fa fa-dropbox"></i>
    				<i class="fa fa-github"></i>
    				<i class="fa fa-html5"></i>
    			</div>
    			<div aria-hidden="ture" class="marquee_group">
    				<i class="fa fa-adn"></i>
    				<i class="fa fa-amazon"></i>
    				<i class="fa fa-android"></i>
    				<i class="fa fa-apple"></i>
    				<i class="fa fa-bitcoin"></i>
    				<i class="fa fa-dropbox"></i>
    				<i class="fa fa-github"></i>
    				<i class="fa fa-html5"></i>
    			</div>
    		</div>
    
    
    		<div class="marquee marquee-reverse">
    			<div class="marquee_group">
    				<i class="fa fa-adn"></i>
    				<i class="fa fa-amazon"></i>
    				<i class="fa fa-android"></i>
    				<i class="fa fa-apple"></i>
    				<i class="fa fa-bitcoin"></i>
    				<i class="fa fa-dropbox"></i>
    				<i class="fa fa-github"></i>
    				<i class="fa fa-html5"></i>
    			</div>
    			<div aria-hidden="ture" class="marquee_group">
    				<i class="fa fa-adn"></i>
    				<i class="fa fa-amazon"></i>
    				<i class="fa fa-android"></i>
    				<i class="fa fa-apple"></i>
    				<i class="fa fa-bitcoin"></i>
    				<i class="fa fa-dropbox"></i>
    				<i class="fa fa-github"></i>
    				<i class="fa fa-html5"></i>
    			</div>
    		</div>
    	</article>
    
    
    
    
    </body>
    </html> 

    Here Is A CSS

     :root{
      --color-text:#000;
      --colog-bg:#000;
      --color-bg-accent:#FFE018;
      --size:clamp(10rem, 1rem + 40vmin, 30rem);
      --gap:calc(var(--size) / 14);
      --duration:60s;
      --scroll-start:0;
      --scroll-end:calc(-100% - var(--gap));
    }
    
    *{box-sizing: border-box;}
    body{
      display: grid;
      align-content: center;
      overflow: hidden;
      gap:var(--gap);
      width: 100%;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--color-text);
      background-color: var(--colog-bg);
    }
    .marquee{
      display: flex;
      overflow: hidden;
      user-select: none;
      gap:var(--gap);
    }
    .marquee_group{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap:var(--gap);
      min-width: 100%;
      animation: scroll-x var(--duration) linear infinite;
    }
    .marquee-reverse .marquee_group{
      animation-direction: reverse;
      animation-delay: -3s;
    }
    @keyframes scroll-x{
      from{transform: translateX(var(--scroll-start));}
      to{transform: translateX(var(--scroll-end));}
    }
    .fa{font-size: 70px!important}
    .marquee .fa{
      display: grid;
      place-items:center;
      width: var(--size);
      fill: var(--color-text);
      background: var(--color-bg-accent);
      aspect-ratio:19/9;
      padding: calc(var(--size) / 10);
      border-radius: 0.5rem;
    }
    .wrapper{
      display: flex;
      flex-direction: column;
      gap:var(--gap);
      margin: auto;
      max-width: 100vw;
    } 
    Code CSS HTML Logo Slider Marque Logo Slider Slider
    SAMIR
    SAMIR
    Hey ! My name is Samir, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Feni,Dagonbhuiyan,Bangladesh. I love to Code and create interesting things while playing with it.

    Facebook ID Telegram ID
    Join the conversation (1)
    1 comment
    1. Sahid
      05 May, 2023
      Profile
      Sahid
      Sahid
      This Person Said: hi bro
      hi bro