0
내 홈페이지에서 jssor 이미지 슬라이더를 사용하고 있습니다. 그 옆에는 텍스트 단락이 있습니다. jssor 이미지 슬라이더를 감싸는 텍스트를 가져올 수 없습니다. 나는 플로트 (float)와 텍스트 정렬 (text-align)을 시도 했으므로 작동시키지 못한다. 누구든지 jssor 이미지 슬라이더를 감싸는 텍스트를 얻을 수있는 아이디어가 있습니까? 다음과 같이 코드는 다음과 같습니다jssor 이미지 슬라이더에서 텍스트 줄 바꾸기를 어떻게합니까?
HTML:
<div class="content">
<!-- image slider -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:
800px; height: 355px; background: #c6eafb; overflow: hidden; margin-right: 2%; margin
bottom: 1.5%; z-index: -1;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no
repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:
800px; height: 356px; overflow: hidden;">
<div>
<img u="image" src="images/mombaby.jpg" />
</div>
<div>
<img u="image" src="images/baby.jpg" />
</div>
<div>
<img u="image" src="images/family.jpg" />
</div>
<div>
<img u="image" src="images/finalization.jpg" />
</div>
<div>
<img u="image" src="images/baby2.jpg" />
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;
left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px;
right: 8px"></span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">banner slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<!-- Jssor Slider End -->
<p class="text">Welcome to Adoption Covenant
Making the decision to adopt a child can be difficult but the process involved with
adopting doesn’t have to be. Adoption Covenant is a licensed, full service adoption
agency for both domestic and international adoption. Our goal is to place children for
adoption with loving families while simplifying and reducing the expense and heartache
commonly involved with the process. Our unique adoption services are rooted in a deep
understanding of adoption laws and our commitment to improving the lives of parentless
children around the world.
"Unless someone like you cares a whole awful lot, nothing is going to get better. Its
not."
Dr. Seuss, The Lorax
</p>
</div>
CSS :
.content {
margin-right: 3%;
margin-left: 3%;
z-index: 100;
background-color: #FFFFFF;
opacity: .85;
border-radius: 30px;
height: 365px;
padding: 1%;
}
.text {
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
font-weight: 400;
color: #000066;
}
/* image slider */
/* jssor slider arrow navigator skin 05 css */
/* .jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown) */
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
/* image slider */