図のように、「イメージポインティング」矢印をスライドカルーセルに表示するにはどうすればよいですか？

私のウェブサイトにはブートストラップカルーセルがあります。図のように、「イメージポインティング」矢印をスライドカルーセルに表示するにはどうすればよいですか？

カルーセルビューにスライドさせると、対応する画像に画像の矢印が表示されるのはどうですか？ここに私が望むもののイラストがあります。

関連するすべてのブートストラップリンクは、ドキュメントの<head>セクションに配置されています。

これまでのコードは次のとおりです。

<div class="menu-cascading-image-button-arrow-container"> 
    <div class="triangle" id="tri-2"></div> 
    <div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1"> 
     <div class="inner-text-box">This year's ISA account<i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
    </div> 
</div> 
<div class="menu-cascading-image-button-arrow-container"> 
<div class="triangle" id="tri-3"></div> 
    <div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3"> 
     <div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
    </div> 
</div> 
<div class="menu-cascading-image-button-arrow-container"> 
<div class="triangle" id="tri-4"></div> 
    <div class="menu-cascading-image-button" data-target="'slider" data-slide-to="4"> 
     <div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
    </div> 
</div>

CSS

.menu-cascading-image-button-arrow-container{ 
width:25%; 
float:left; 
cursor:pointer; 
background-color:#E0DDDD; 
position:relative; 
} 
.menu-cascading-image-button-arrow-container:hover{ 
background-color:#0D0155; 
color:white; 
} 
.triangle{ 
width:0px; 
height:0px; 
border:transparent solid 20px; 
border-bottom:#0D0155 solid 20px; 
display:none; 
padding:0px; 
margin-left:100px; 
bottom:99%; 
position:absolute; 
} 
.menu-cascading-image-button{ 
float:left; 
cursor:pointer; 
width:100%; 
} 
#menu-button-container{ 
width:100%; 
} 
.inner-text-box{ 
font-size:15px; 
color:#0D0155; 
padding:15px; 
font-weight:200; 
} 
.inner-text-box i{ 
float:right; 
padding-top:3px; 
font-weight:100; 
} 
.inner-text-box:hover{ 
color:white; 
}

おかげ

出典

2016-09-05 Anonymous

使用イメージや、あなたがそれをしたい場合は、コード – sms247

の助けを借りて、コードを送信するおかげで、ちょうどポストにHTML＆CSSのコードを追加しました。矢印は配置されていますが、関連画像がカルーセルビューにスライドすると移動する必要があります。ありがとう、T. –

彼らは独立したカルーセル項目のための独立しているとして、彼らは移動しません。

実際のトリックは、カルーセルのすべてのアイテムに1つの要素しかない場合に機能します。また、JSでは、アクティブな要素に応じて要素を移動できます。

次のコードはそれを示しています。それを見るために項目をクリックしてください。これは簡単な例であり、複雑な仕組みで動作するように強化する必要があります。

var container = '.menu-cascading-image-button-arrow-container'; 
 
var item = '.menu-cascading-image-button'; 
 
var triangle = '#triangle'; 
 
var triangleWidth = $(triangle).outerWidth(); 
 

 
function markActive(elementToGo) { 
 
    $el = $(elementToGo); 
 
    $(item).removeClass('active'); 
 
    $el.addClass('active'); 
 
    var offset = $el.position(); 
 
    var width = $el.outerWidth(); 
 
    var left = width/2 - triangleWidth/2; 
 
    $(triangle).css('margin-left', left + offset.left); 
 
} 
 
$(document).ready(function() { 
 
    //initial page load 
 
    markActive(item + ':first'); 
 
    
 
    //mark item active on click 
 
    $(item).on('click', function(e) { 
 
    e.preventDefault(); 
 
    markActive(this) 
 
    }) 
 

 
})

.menu-cascading-image-button-arrow-container { 
 
    position: relative; 
 
    margin-top: 25px; 
 
} 
 
.menu-cascading-image-button-arrow-container .menu-cascading-image-button { 
 
    width: 25%; 
 
    float: left; 
 
    cursor: pointer; 
 
    background-color: #E0DDDD; 
 
    color: #0D0155; 
 
    position: relative; 
 
    border-right: 1px solid #aaa; 
 
    box-sizing: border-box; 
 
} 
 
.menu-cascading-image-button-arrow-container .menu-cascading-image-button.last { 
 
    border-right-color: transparent; 
 
} 
 
.menu-cascading-image-button-arrow-container .menu-cascading-image-button.active, 
 
.menu-cascading-image-button-arrow-container .menu-cascading-image-button:hover { 
 
    background-color: #0D0155; 
 
    color: white; 
 
} 
 
.menu-cascading-image-button-arrow-container[data-active] .triangle { 
 
    display: block 
 
} 
 
.triangle { 
 
    transition: margin linear 0.3s; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: transparent solid 20px; 
 
    border-bottom: #0D0155 solid 20px; 
 
    display: none; 
 
    padding: 0px; 
 
    margin-left: 100px; 
 
    bottom: 99%; 
 
    position: absolute; 
 
} 
 
#menu-button-container { 
 
    width: 100%; 
 
} 
 
.inner-text-box { 
 
    font-size: 15px; 
 
    padding: 15px; 
 
    font-weight: 200; 
 
} 
 
.inner-text-box i { 
 
    float: right; 
 
    padding-top: 3px; 
 
    font-weight: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu-cascading-image-button-arrow-container" data-active> 
 
    <div class="triangle" id="triangle"></div> 
 
    <div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1"> 
 
    <div class="inner-text-box">This year's ISA account<i class="fa fa-chevron-right" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3"> 
 
    <div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-cascading-image-button last" data-target="'slider" data-slide-to="4"> 
 
    <div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-09-05 05:50:22 Pankaj

図のように、「イメージポインティング」矢印をスライドカルーセルに表示するにはどうすればよいですか？

答えて

関連する問題