Question

嘿，我并不是真正的IT人员，但是我过去学过一些HTM1编码。我开发博客（关于电影）的设计，并使用给定的模板。我想向该混合添加一个滑块，看起来像这样...

在CSS中：

/* SLIDER */

#slider {
background: #a71b1b;
width: 720px;
height: 410px;
margin: 0 0 20px;
padding: 0px;
border-radius: 0px;
}

#slider:hover .article-data {
    height: auto;
    overflow: visible;
}

#slider:hover img {
    opacity: 0.7;
}

#slider .article-infos,
#slider .lead {
display: none;
}

#slider .bjqs {
display: block;
position: relative;
width: 720px;
height: 410px;
overflow: visible;
margin: 0;
padding: 0;
}

#slider .bjqs li {
    display: block;
    position: absolute;
  background-color: #a71b1b;
    top: 0;
    left: 0;
    width: 770px;
    height: 410px;
}

#slider .article-image {
display: block;
background: #e9ebeb;
position: relative;
width: 720px;
height: 410px;
}

#slider img {
position: absolute;
bottom: 0;
height: auto;
left: 0;
margin: auto;
right: 0;
top: 0;
width: auto;
        transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
}

#slider .article-data {
background: black;
position: absolute;
bottom: 0;
left: 0;
font-size: 20px;
width: 735px;
padding: 0;
height: auto;
}

#slider .article-data h1 {
    padding: 15px 15px 15px;
    font-size: 25px;
    line-height: 20px;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    width: auto;
    height: 40px;
}

#slider .article-data h1 a {
    display: block;
    color: auto;
}

#slider .bjqs-markers {
display: block;
position: relative;
top: -390px;
right: -694px;
width: 370px;
z-index: 5;
}

#slider .bjqs-markers li {
    background: #cfcfcf;
    font-family: 'Arial';
    font-size: 20px;
    line-height: 42px;
    margin: 0 0 2px;
}

#slider .bjqs-markers li + li + li + li + li {
    display: none;
}

    #slider .bjqs-markers li.active-marker {
        background: #a71b1b;
    }

#slider .bjqs-markers a {
    background: rgba(0, 0, 0, 0.12);
    position: relative;
    display: block;
    padding: 15px;
    z-index: 2;
}

    #slider .bjqs-markers a:hover {
        background: #b7b5b5;
        color: #fff;
    }

    #slider .bjqs-markers .active-marker a {
        background: #a71b1b;
        color: #fff;
    }

#slider .bjqs-markers .active-marker {
    position: relative;
}

#slider .bjqs-markers .active-marker:after {
    position: absolute;
    content: "";
    right: 100%;
    top: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: transparent;
    border-right-color: #a71b1b;
    border-width: 28px;
    margin-top: -28px;
}

在HTML中：

<blhc:if key="pageType" value="blogcimlap" operator="eq">
            <blh:starred width="720" height="410" limit="4" bjqs_showcontrols="false"              bjqs_showmarkers="true" bjqs_centermarkers="false" />
        </blhc:if>

表面上看起来像这样： PIC

您可以看到电影标题出现在滑块上，但没有出现在仅显示数字的BJQS标记上，我也不知道如何在此处显示标题。但是，此代码可在其他内置模板中起作用，例如：PIC

您能帮我解决这个问题吗？

如何为滑条和bjqs代码赋予标题？

0 个答案: