Slider with down tabs / js html css

I’m Looking for a Slider solution with an extra tab at the bottom. I have found something like this, but it is not the effect I want to achieve yet. I would like to have a similar effect as in the photo below. Can anyone help me?

$('.tabs').on('show.bs.tab', function (e) {     
  if (e.relatedTarget === undefined) {    
    $($(e.target).attr('href')).slideDown('slow');
  }
  else {
    $($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
      done: function() {
        $($(e.target).attr('href')).slideDown('slow');
      }
    });
  } 
});
.tab-pane{
  background:#fff;
  padding: 0px; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="tabs">


<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel"  style="display: block;"><p><img src="https://iv.pl/images/35e7e17273e7367fe577cfeb625918af.png"></p></div>
  <div class="tab-pane " id="profile" role="tabpanel"  style="display: none;"><p><img src="https://iv.pl/images/c46130a679b900e9158c02ff965770b8.png"></p></div>
  <div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p><img src="https://iv.pl/images/35e7e17273e7367fe577cfeb625918af.png"></p></div>
  <div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p><img src="https://iv.pl/images/c46130a679b900e9158c02ff965770b8.png"></p></div>  
</div>
<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Mowers</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Jewelry</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Cleaner</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Watch</a>
  </li>
</ul>
</div>
Also I need switch slider on muse click (left or right) screen1: enter image description here

Answer

The tabs used in the example image are the basic tabs provided by material-ui

https://material-ui.com/components/tabs/#tabs

Leave a Reply

Your email address will not be published. Required fields are marked *