Hur lägger jag till dragspelbildreglage på Weebly -webbplatsen?

Weebly erbjuder ett traditionellt bildspel -element för att lägga till reglage till din webbplats. Tyvärr är detta inte närmare moderna bildspel som erbjuds av tredjepartsleverantörer eller plugins. Du kan skapa snygga anpassade dragspelstilar som är gjorda enbart med CSS. I den här artikeln kommer vi att förklara hur du skapar och bildspelreglage för CSS -dragspel på Weebly -webbplatsen

Weebly Accordion Image Slider

Nedan är hur det snygga reglaget kommer att se ut på din Weebly -webbplats.

CSS dragspelreglage

Hur lägger jag till dragspel bildreglage i Weebly?

Nu när du har sett reglaget och om det ser bra ut, här är en stegvis instruktion om hur du lägger till reglaget på din webbplats. Processen består av tre enkla steg:

• Ladda upp bilder för reglaget
• Lägga till CSS -kod på en sid- eller webbplatsnivå
• Lägga till HTML -kod med hjälp av inbäddningskodelement

Steg 1 – Ladda upp bilder för dragspelreglaget

Förbered alla dina bilder med önskad storlek. I det här exemplet använde vi bilder med bredd = 640 px. Ladda upp alla bilder på din webbplats under "Tema> Redigera HTML / CSS > Tillgångar> Ladda upp filer …".

Ladda upp bilder i Weebly Code Editor

Du måste behålla webbadresserna till uppladdade bilder som måste användas i steg 3. Webbadressen till en uppladdad bild kommer att vara:

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

Alternativt kan du högerklicka på bilden och få webbadressen som ska se ut nedan:

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

Få uppladdad bild URL

När du har laddat upp alla dina bilder klickar du på knappen "Spara" och anger ett eget namn för ditt tema.

Steg 2 – Lägga till CSS -kod

Om du bara vill lägga till reglaget på vissa sidor lägger du till CSS -koden nedan under "Sidor> Välj sidan> SEO -inställningar> Rubrikkod" på de nödvändiga sidorna.

Lägg till rubrikkod på sidan

Om du vill lägga till reglaget på flera sidor rekommenderar vi att du lägger till det i huvud -CSS under "Tema> Redigera HTML / CSS> Stil> main.less". Du kan också lägga till koden under avsnittet "Inställningar> SEO > Rubrikkod".

Lägg till rubrikkod på Weebly -webbplatsnivå

<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 anpassa vilken som helst av stilarna efter dina behov.

Steg 3 – Lägga till HTML -kod

Det sista steget är att lägga till nedanstående HTML -kod för reglaget genom att dra och släppa ett inbäddningskodselement på innehållsområdet på en obligatorisk sida. Glöm inte att ersätta bildlänkarna med dina egna länkar från steg 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>

Obs! När du har lagt till HTML -kod kan du se att bilderna listas nedåt under den andra i Weebly -redigeraren. Detta är bra eftersom CSS -effekterna inte tillämpas på sidan, publicera sidan för att se det faktiska reglaget.