如何塑造或遮盖自定义轮播

时间：2018-12-25 11:03:20

标签： jquery html css

我为我们的项目准备了carousel.psd，并且轮播上有一个特殊的形状，我该如何在CSS或JS中做到这一点？我说的是转盘上的红色形状？有例子吗？

enter image description here 

// Carousel Auto-Cycle
$(document).ready(function() {
  $('.carousel').carousel({
    interval: 6000
  })
});
html {
  font-size: 100% !important;
}


/* Link */

a,
a:focus {
  text-decoration: none;
  opacity: 1;
}

a:hover {
  zoom: 1;
  filter: alpha(opacity=60);
  opacity: 0.6;
  text-decoration: none;
}


/* Remove Firefox selection dot */

a,
a:focus,
a:active,
a:hover,
object,
embed {
  outline: none !important;
}

:-moz-any-link:focus {
  outline: none;
}

input::-moz-focus-inner {
  border: 0;
}

:focus {
  outline: 0;
}


/* Remove Firefox Dropdown selection dot */

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


/* Image */

a img {
  border: none;
}

img {
  width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}


/* max-width:100% causes IE8 bug */

div {
  word-break: break-all;
}


/* Main 
------------------------------------------------ */

body {
  background: #333956;
  padding: 0px;
}


/* Carousel Fading slide */

.carousel-fade .item {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.carousel-fade .active.left,
.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}

.carousel-fade .carousel-control {
  z-index: 3;
}

.carousel-fade .next,
.carousel-fade .prev {
  left: 0;
  z-index: 1;
}


/* Carousel Control */

.carousel-control {
  top: 43%;
  font-size: 48px;
}


/* Animation */

.control-box,
a.carousel-control,
.carousel-indicators li {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  /* hardware acceleration will cause Bootstrap carousel controlbox margin error in webkit browsers */
  /* Assigning animation to indicator li will make slides flicker */
}


/* Removing BS background */

.carousel .control-box {
  opacity: 0;
}

a.carousel-control.left {
  left: 0;
  background: none;
  border: 0;
}

a.carousel-control.right {
  right: 0;
  background: none;
  border: 0;
}


/* Hover animation */

.carousel:hover .control-box {
  opacity: 1;
}

.carousel:hover a.carousel-control.left {
  left: 15px;
}

.carousel:hover a.carousel-control.right {
  right: 15px;
}


/* Carouse Indicator */

.carousel-indicators li.active,
.carousel-indicators li {
  border: 0;
}

.carousel-indicators li {
  background: #666;
  margin: 0 3px;
  width: 12px;
  height: 12px;
}

.carousel-indicators li.active {
  background: #fff;
  margin: 0 3px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />


<section class="main-slider">


  <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">



    <!-- Wrapper for slides -->
    <div class="carousel-inner">


      <!-- Slide 1 : Active -->
      <div class="item active">
        <img src="https://bootstrapious.com/tutorial/carousel/img/carousel1.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 1</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        </div>
        <!-- /.carousel-caption -->
      </div>
      <!-- /Slide1 -->


      <!-- Slide 2 -->
      <div class="item ">
        <img src="https://bootstrapious.com/tutorial/carousel/img/carousel1.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 2</h3>
          <p>Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
        <!-- /.carousel-caption -->
      </div>
      <!-- /Slide2 -->

    </div>
    <!-- /Wrapper for slides .carousel-inner -->



    <!-- Controls -->
    <div class="control-box">
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
    <!-- /.control-box -->


  </div>
  <!-- /#myCarousel -->


</section>
<!-- /.main-slider.container -->



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

See on CodePen

1 个答案:

答案 0 :(得分：1)

您可以使用CSS来制作这种形状，也可以使用这种形状的图像并将其放置在滑块的顶部，方法是绝对放置它。
在这里，我使用了主滑块的“之后”属性，可以改用div或image 

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 6000
    })
  });
/* Global 
------------------------------------------------ */
@charset "utf-8";
html { font-size: 100% !important; }

/* Link */
a, a:focus { text-decoration: none; opacity: 1; }
a:hover { zoom: 1; filter: alpha(opacity=60); opacity: 0.6; text-decoration: none; }

/* Remove Firefox selection dot */
a, a:focus, a:active, a:hover, object, embed { outline: none !important; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
:focus { outline: 0; }

/* Remove Firefox Dropdown selection dot */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

/* Image */
a img { border: none; }
img { width: 100%; height:auto; -ms-interpolation-mode: bicubic; } /* max-width:100% causes IE8 bug */

div { word-break: break-all; }



/* Main 
------------------------------------------------ */
body {
  background: #333956;
  padding: 0px;
}  



/* Carousel Fading slide */
.carousel-fade .item {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.carousel-fade .active.left,
.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}
.carousel-fade .carousel-control { z-index: 3; }
.carousel-fade .next,
.carousel-fade .prev {
  left: 0;
  z-index: 1;
}



/* Carousel Control */
.carousel-control {
  top: 43%;
  font-size: 48px;
  } 

  /* Animation */
  .control-box, a.carousel-control, .carousel-indicators li {
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;   
    /* hardware acceleration will cause Bootstrap carousel controlbox margin error in webkit browsers */
    /* Assigning animation to indicator li will make slides flicker */
   } 

  /* Removing BS background */
  .carousel .control-box { opacity: 0; }
  a.carousel-control.left  { left: 0; background: none; border: 0;}
  a.carousel-control.right { right: 0; background: none; border: 0;}

  /* Hover animation */
  .carousel:hover .control-box { opacity: 1; }
  .carousel:hover a.carousel-control.left { left: 15px; }
  .carousel:hover a.carousel-control.right { right: 15px; }    



/* Carouse Indicator */
.carousel-indicators li.active,
.carousel-indicators li {
  border: 0;
}

.carousel-indicators li {
  background: #666;
  margin: 0 3px;
  width: 12px;
  height: 12px;
}

.carousel-indicators li.active {
  background: #fff;
  margin: 0 3px;
}
.main-slider {
  position: relative;
  overflow: hidden;
}
section.main-slider:after {
    content: "";
    position: absolute;
    /* top: 50%; */
    left: 0;
    bottom: -73%;
    width: 180%;
    height: 120%;
    background: red;
    border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<section class="main-slider">


  <div id="myCarousel" class="carousel slide" data-ride="carousel">




    <!-- Wrapper for slides -->
    <div class="carousel-inner">


      <!-- Slide 1 : Active -->
      <div class="item active">
        <img src="http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider9.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 1</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        </div><!-- /.carousel-caption -->
      </div><!-- /Slide1 -->


      <!-- Slide 2 -->
      <div class="item ">
        <img src="http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider9.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 2</h3>
          <p>Etiam porta sem malesuada magna mollis euismod.</p>
        </div><!-- /.carousel-caption -->
      </div><!-- /Slide2 -->


      <!-- Slide 3 -->
      <div class="item ">
        <img src="http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider9.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 3</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div><!-- /.carousel-caption -->
      </div><!-- /Slide3 -->


      <!-- Slide 4 -->
      <div class="item ">
        <img src="http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider9.jpg" alt="">
        <div class="carousel-caption">
          <h3>Slide 4</h3>
          <p>Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div><!-- /.carousel-caption -->
      </div><!-- /Slide4 -->


    </div><!-- /Wrapper for slides .carousel-inner -->



    <!-- Controls -->
    <div class="control-box">
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div><!-- /.control-box -->


  </div><!-- /#myCarousel -->


</section><!-- /.main-slider.container -->



<!-- Delete This -->
<footer class="info">
  <a href="http://simonalex.com/">&hearts; Redfrost</a> | <a href="https://twitter.github.com/bootstrap/">Get Bootstrap</a> | <a href="https://fortawesome.github.io/Font-Awesome/">Get Font Awesome</a> | <a href="http://placehold.it/">Get Placeholder</a>

  <p>Bootstrap 3.0 style Carousel mod</p>
</footer>

相关问题
最新问题