Так что я занимался начальной загрузкой около месяца, и поэтому мой HTML может быть немного грязным. Исходная причина проблемы заключается в том, что моя задача требует от меня создания удобной карусели для создания пользовательского интерфейса, подобного приведенному ниже:
С моим текущим кодом это то, чего я могу достичь:
Вот мой HTML для того, чего я достиг на данный момент:
.slider-left {
display: flex;
align-items: center;
p {
font-size: 16px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
}
.slider-middle {
display: flex;
align-items: center;
word-break: break-word;
h1 {
font-weight: bold;
color: blue;
}
h2 {
text-transform: uppercase;
font-style: italic;
font-size: 16px;
font-weight: normal;
}
}
.v-center {
width: 500px;
height: 1000px;
display: flex;
align-items: center;
}
.slider-image {
width: 100%;
}
.slider-right {
padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- Left most text -->
<div class="col-lg-1 slider-left text-right">
<div class="container center-align">
<p>Publication</p>
</div>
</div>
<!-- Middle Text -->
<div class="col-md-4 slider-middle center-align">
<div class="container">
<h2>title2</h2>
<h1>title1</h1>
<p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
<a></a>
</div>
</div>
<!-- Carousel Image -->
<div class="col-md-7 slider-right">
<img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-5 slider-nav">
<p>navigation</p>
</div>
</div>
</div>
Я обязан использовать bootstrap для создания любого вида дизайна пользовательского интерфейса, потому что мой руководитель говорит, что это помогает для отзывчивости веб-сайта. Здесь происходит то, что весь контейнер перемещается для одного и того же контейнера снова и снова. Пожалуйста, дайте мне знать, что делать, и любое объяснение очень поможет. Кроме того, если кто-нибудь знает, как вставить пользовательские кнопки и пользовательская нумерация страниц в этой навигационной панели, может дать мне знать, я был бы очень признателен, хотя я не особо разбирался в этом.
Ура:)