Question

我的图像上有图标，如下图所示。

图像上的图标是可点击的，每当我点击任何图标时，它都应该移动到中心。我怎么能这样做？

的index.php

<div class="container-fluid">
    <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img">
        <img src="images/Services.jpg">
        <ul>
        <div class="col-md-12 col-lg-12">   
            <div class="row">
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div> 
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
            </div>
        </div>
        </ul>
    </div>
</div><br><br>

text.css

   .bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
  opacity: .6;
}

我点击的图标应移至中心。请帮助我解决方案获得解决方案。

先谢谢你!!!

Answer 1

我参与了图像轮播，它可以帮助您实现您的期望。

试试carousel indicator的图片。我已经给出了旋转木马的默认值。

根据您的要求更改css和div职位。

让我知道这就是你要找的东西。

查看工作编辑的小提琴：http://jsfiddle.net/KishorVelayutham/yhevvxz4/26/

希望这会有所帮助..！

Answer 2

Owl Carousel是解决问题的最佳选择。

<div style="background-image:url('images/Services.jpg');">
        <div class="owl-carousel owl-theme">
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
    </div>
</div>

你需要将旋转木马包裹在背景图像div中，这个插件提供了各种选项来定制你的旋转木马，即使在移动视图上也是如此。

希望这可以帮助你。

滑动到图像上的图标

2 个答案: