Hvordan legge til trekkspillbildeslider i Weebly Site?

Weebly tilbyr et tradisjonelt bildefremvisningselement for å legge glidebrytere til nettstedet ditt. Dessverre er dette ikke i nærheten av moderne lysbildeserier som tilbys av tredjepartsleverandører eller plugins. Du kan lage flotte, tilpassede, trekkspillstilglidere laget utelukkende med CSS. I denne artikkelen vil vi forklare hvordan du lager og CSS trekkspillbildeglider i Weebly -området

Glidebryter for weebly trekkspill

Nedenfor ser du hvordan den stilige glidebryteren vil se ut på ditt Weebly -nettsted.

CSS trekkspillglider

Hvordan legge til trekkspillbildeglidebryter i Weebly?

Nå som du har sett glidebryteren, og hvis det ser bra ut, er det en trinnvis instruksjon om hvordan du legger til glidebryteren på nettstedet ditt. Prosessen består av tre enkle trinn:

• Laster opp bilder for glidebryteren
• Legge til CSS -kode på et side- eller nettstednivå
• Legger til HTML -kode ved hjelp av innebygd kodeelement

Trinn 1 – Last opp bilder for trekkspillglidebryteren

Forbered alle bildene dine med ønsket størrelse. I dette eksemplet brukte vi bilder med bredde = 640 px. Last opp alle bildene på nettstedet ditt under "Tema> Rediger HTML / CSS > Eiendeler> Last opp fil (er) …".

Last opp bilder i Weebly Code Editor

Du må beholde nettadressene til opplastede bilder som må brukes i trinn 3. Nettadressen til et opplastet bilde vil være som:

https://your-site-name.com/files/theme/image-name.jpg

Alternativt kan du høyreklikke på bildet og få nettadressen som skal se ut nedenfor:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Få opplastet bilde -URL

Etter å ha lastet opp alle bildene dine, klikker du på "Lagre" -knappen og gir et egendefinert navn for temaet ditt.

Trinn 2 – Legge til CSS -kode

Hvis du bare vil legge til glidebryteren på bestemte sider, legger du til CSS -koden nedenfor under "Sider> Velg siden> SEO -innstillinger> Overskriftskode" på de nødvendige sidene.

Legg til topptekst på siden

Hvis du vil legge til glidebryteren på flere sider, anbefaler vi at du legger den til i hoved -CSS -en under "Tema> Rediger HTML / CSS> Stil> main.less". Du kan også legge til koden under delen "Innstillinger> SEO > Overskriftskode".

Legg til topptekst på Weebly -nettstednivå

<style type="text/css">
.accordion_slider {
width: 805px; height: 320px;
overflow: hidden;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordion_slider ul {
width: 2000px;
}
.accordion_slider li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordion_slider ul:hover li {width: 40px;}
.accordion_slider ul li:hover {width: 640px;}
.accordion_slider li img {
display: block;
max-width: 640px !important;
}
.image_box {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0; 
width: 640px; 
}
.image_box a {
display: block;
color: #fff !important;
text-decoration: none;
text-align: left;
padding: 20px;
font-size: 16px;
}
</style>

Du kan tilpasse hvilken som helst av stilene etter behov.

Trinn 3 – Legge til HTML -kode

Det siste trinnet er å legge til HTML -koden nedenfor for glidebryteren ved å dra og slippe et innebygd kodeelement på innholdsområdet på en nødvendig side. Ikke glem å erstatte bildelinkene med dine egne lenker fra trinn 1.

<div class="accordion_slider">
<ul>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-1.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-2.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-3.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-4.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-5.jpg"/>
</li>
</ul>
</div>

Merk: Etter at du har lagt til HTML -kode, kan det hende du ser at bildene er listet opp under hverandre i Weebly -editoren. Dette er greit fordi CSS -effektene ikke brukes på siden. Publiser siden for å se den faktiske glidebryteren.