CODEWITHSUNDEEP
javascriptjqueryslidershow-hide
Guglielmo Albesano
Guglielmo Albesano

Reputation: 13

How to show/hide divs when slider's slides are visible/hidden

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
#arrow-back, #arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

I have a slider whose slides are visible and hidden by clicking on prev/next buttons and there are four divs square out of the slider. I would like that when, for example, the slide 3 is visible, square 3 becomes visible.

I've tried this script but it doesn't works

if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }

CSS

  #arrow-back, #arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }

HTML

<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

jQuery

    $(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }

i have changed your code

Upvotes: 1

Views: 1686

Answers (3)

chandu komati
chandu komati

Reputation: 795

please check it man.

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
#arrow-back, #arrow-next {
    background:black;
    height: 40px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    //background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

Upvotes: 0

SKYz
SKYz

Reputation: 65

I think you better add 'id's to your this would work

Upvotes: 0

Arpit Bansal
Arpit Bansal

Reputation: 493

If the task is to repeat the check for visibility and subsequently make the decision based on the above check to show or hide the box then try outing the code inside each event handler.

$("#arrow-back").click(function(){
     .
     .
     . Perform the task meant for click
     // show/hide squares
    showHideFunction();
});
function showHideFunction(){
if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
}

Upvotes: 1

Related Questions