Styjun

An idiom for “Until you punish the offender, they will not give up offenses”

'spazieren' - walking in a silly and affected manner?

Calculate Landau's function

Why do presidential pardons exist in a country having a clear separation of powers?

Am I required to correct my opponent's assumptions about my morph creatures?

Is it good practice to speed up and slow down where not written in a song?

What is this "opened" cube called?

Why do motor drives have multiple bus capacitors of small value capacitance instead of a single bus capacitor of large value?

Break down the phrase "shitsurei shinakereba naranaindesu"

Cheap oscilloscope showing 16 MHz square wave

Moscow SVO airport, how to avoid scam taxis without pre-booking?

How to load files as a quickfix window at start-up

New coworker has strange workplace requirements - how should I deal with them?

Do universities maintain secret textbooks?

Understanding data transmission rates over copper wire

Received email from ISP saying one of my devices has malware

Turn off Google Chrome's Notification for "Flash Player will no longer be supported after December 2020."

What is the motivation behind designing a control stick that does not move?

What is the chance of getting a Red Cabbage in year 1?

How to Flip Rotation from Positive to Negative?

How to understand payment due date for a credit card

How can I store milk for long periods of time?

Which is the correct version of Mussorgsky's Pictures at an Exhibition?

What caused the end of cybernetic implants?

Can one use css to loop a flexbox slider?

Set cellpadding and cellspacing in CSS?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSLoop through an array in JavaScriptHow can I transition height: 0; to height: auto; using CSS?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I've built a carousel using flexbox:
I need it to slide every 3 seconds and repeat the loop
Add previous and next buttons on the sides
Add navigation dots under it.
Is there a way to do this with css? Or do I need to use jquery?
This is my carousel code:

<section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php 
 if( have_rows('logos') );
 while( have_rows('logos') ): the_row(); 
 $image = get_sub_field('logo_image');
 $content = get_sub_field('name');
?>
 <span class="logo_slide">
 <img src="<?php echo $image['url']; ?>" />
 </span>

 <?php endwhile; ?>
 <?php endif; ?>
</div>
</section>

This is the css:

 .section-logo 
 width: 100%;
 height: 100%;


.logo_carousel 
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: auto;


.logo_carousel::-webkit-scrollbar 
 display: none;


.logo_slide img 
 width: 195px;
 height: 115px;


.logo_slide 
 flex-shrink: 0; /* added, so it won't shrink */
 display: flex; /* added */
 align-items: center; /* added */
 justify-content: center; /* added animation: slide-it 10s infinite; */
 width: 195px;
 height: 115px;
 margin: 5px;


.logo_slide:hover .logo_tt 
 visibility: visible;

Also I'm trying to add the navigation icons and the slider arrows with html code after <div class="logo_carousel"> but it is not showing up. Where should I place this code?
If I need to use javascript how should I make it slide using javascript?

javascript html css

share|improve this question

edited Mar 28 at 7:22

LTech

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why not use a library like github.com/kenwheeler/slick?
  
  – zino
  Mar 27 at 23:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This where you would use Javascript, css is not really a programming language to handle stuff like this. You can use the javascript function setInterval() to set an interval time in milliseconds to fire a function to manipulate the styling on the element(s). There's many libraries out there to help you do this, including bootstrap. w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
  
  – Zac
  Mar 27 at 23:38
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm using sage and if I try and add javascript to the route file the page just reloads again and again.
  
  – LTech
  Mar 27 at 23:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Here is an example of pure css slider. But it's not flexbox. Maybe you want it codepen.io/drygiel/pen/rtpnE
  
  – Duannx
  Mar 28 at 3:54
  

  
  
  
  

add a comment | 

2

I've built a carousel using flexbox:
I need it to slide every 3 seconds and repeat the loop
Add previous and next buttons on the sides
Add navigation dots under it.
Is there a way to do this with css? Or do I need to use jquery?
This is my carousel code:

<section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php 
 if( have_rows('logos') );
 while( have_rows('logos') ): the_row(); 
 $image = get_sub_field('logo_image');
 $content = get_sub_field('name');
?>
 <span class="logo_slide">
 <img src="<?php echo $image['url']; ?>" />
 </span>

 <?php endwhile; ?>
 <?php endif; ?>
</div>
</section>

This is the css:

 .section-logo 
 width: 100%;
 height: 100%;


.logo_carousel 
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: auto;


.logo_carousel::-webkit-scrollbar 
 display: none;


.logo_slide img 
 width: 195px;
 height: 115px;


.logo_slide 
 flex-shrink: 0; /* added, so it won't shrink */
 display: flex; /* added */
 align-items: center; /* added */
 justify-content: center; /* added animation: slide-it 10s infinite; */
 width: 195px;
 height: 115px;
 margin: 5px;


.logo_slide:hover .logo_tt 
 visibility: visible;

Also I'm trying to add the navigation icons and the slider arrows with html code after <div class="logo_carousel"> but it is not showing up. Where should I place this code?
If I need to use javascript how should I make it slide using javascript?

javascript html css

share|improve this question

edited Mar 28 at 7:22

LTech

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why not use a library like github.com/kenwheeler/slick?
  
  – zino
  Mar 27 at 23:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This where you would use Javascript, css is not really a programming language to handle stuff like this. You can use the javascript function setInterval() to set an interval time in milliseconds to fire a function to manipulate the styling on the element(s). There's many libraries out there to help you do this, including bootstrap. w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
  
  – Zac
  Mar 27 at 23:38
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm using sage and if I try and add javascript to the route file the page just reloads again and again.
  
  – LTech
  Mar 27 at 23:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Here is an example of pure css slider. But it's not flexbox. Maybe you want it codepen.io/drygiel/pen/rtpnE
  
  – Duannx
  Mar 28 at 3:54
  

  
  
  
  

add a comment | 

I've built a carousel using flexbox:
I need it to slide every 3 seconds and repeat the loop
Add previous and next buttons on the sides
Add navigation dots under it.
Is there a way to do this with css? Or do I need to use jquery?
This is my carousel code:

<section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php 
 if( have_rows('logos') );
 while( have_rows('logos') ): the_row(); 
 $image = get_sub_field('logo_image');
 $content = get_sub_field('name');
?>
 <span class="logo_slide">
 <img src="<?php echo $image['url']; ?>" />
 </span>

 <?php endwhile; ?>
 <?php endif; ?>
</div>
</section>

This is the css:

 .section-logo 
 width: 100%;
 height: 100%;


.logo_carousel 
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: auto;


.logo_carousel::-webkit-scrollbar 
 display: none;


.logo_slide img 
 width: 195px;
 height: 115px;


.logo_slide 
 flex-shrink: 0; /* added, so it won't shrink */
 display: flex; /* added */
 align-items: center; /* added */
 justify-content: center; /* added animation: slide-it 10s infinite; */
 width: 195px;
 height: 115px;
 margin: 5px;


.logo_slide:hover .logo_tt 
 visibility: visible;

Also I'm trying to add the navigation icons and the slider arrows with html code after <div class="logo_carousel"> but it is not showing up. Where should I place this code?
If I need to use javascript how should I make it slide using javascript?

javascript html css

share|improve this question

edited Mar 28 at 7:22

LTech

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

<section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php 
 if( have_rows('logos') );
 while( have_rows('logos') ): the_row(); 
 $image = get_sub_field('logo_image');
 $content = get_sub_field('name');
?>
 <span class="logo_slide">
 <img src="<?php echo $image['url']; ?>" />
 </span>

 <?php endwhile; ?>
 <?php endif; ?>
</div>
</section>

 .section-logo 
 width: 100%;
 height: 100%;


.logo_carousel 
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow-x: auto;


.logo_carousel::-webkit-scrollbar 
 display: none;


.logo_slide img 
 width: 195px;
 height: 115px;


.logo_slide 
 flex-shrink: 0; /* added, so it won't shrink */
 display: flex; /* added */
 align-items: center; /* added */
 justify-content: center; /* added animation: slide-it 10s infinite; */
 width: 195px;
 height: 115px;
 margin: 5px;


.logo_slide:hover .logo_tt 
 visibility: visible;

share|improve this question

edited Mar 28 at 7:22

LTech

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

share|improve this question

edited Mar 28 at 7:22

LTech

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges

asked Mar 27 at 23:32

LTechLTech

72244 gold badges1313 silver badges3636 bronze badges