format carousel bootstrap

Navigation
0

I've downloaded a carousel of bootstrap images ( link ) and I'm trying to see what device I see it on (pc, tablet or mobile) are hiding images. I have left 3 images in the carousel and when I go to tablet I should leave 2 images active and hide 1 and in mobile 1 image and hide 2 but I do not know how to do it.

In this carousel when doing responsive, the images are put in a column and should not be, they should follow online or hide.

Could you please help me or if you know of a carousel in which the content is hidden according to the responsive?

Thank you very much, best regards

    
asked by derek 05.11.2018 в 18:22
source

2 answers

1

Use the following code for the carousel 

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active" id="Slide1" >
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item" id="Slide2" >
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item" id="Slide3" >
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

To hide them in different screen sizes you must do the following with css: 

@media only screen and (min-width: 780px)  {
   #Slide1
   {
       Display = none;
   }
}

@media only screen and (min-width: 320px)  {
   #Slide1
   {
       Display = none;
   }
   #Slide2
   {
       Display = none;
   }
}
    
answered by 05.11.2018 в 19:41
0

Look at the following link: link

The documentation worked for me

    
answered by 06.11.2018 в 23:59
Count the words with vowels Problem java characters in Eclipse