WN - Vilken slider rekommenderar ni?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Vilken slider rekommenderar ni? (https://www.wn.se/forum/showthread.php?t=1058936)

bird200

2013-08-26 18:18

Vilken slider rekommenderar ni?

Jag är i behov av en slider till min hemsida. Tanken är att den skall rulla 5-6 bilder och att om man klickar på någon av bilderna så skall man komma vidare till den undersida som bilden presenterar.

Undrar om ni kan rekommendera någon särskild slider? Detta är min kravlista:

Den skall vara gratis (jag är ny på sliders och vill inte lägga 50-100 dollar på att testa)

Den skall vara fristående från wordpress

Varje enskild bild skall kunna gå och klicka på (länkas) så att man kommer vidare till den undersida som bilden hör till

Sliderna skall ha en framåt och bakåt knapp och/eller en lista med punkter som man kan klicka i för att komma framåt eller bakåt i slidern.

Det skall helst gå att skriva text i slidern, ett alternativ är dock att lägga texten direkt på bilden om inte detta fungerar.

Slidern skall vara förhållandevis enkelt att förstå/det skall finnas en instruktion för hur man implementerar den. Jag kan bara grundläggande HTML.

allstars

2013-08-26 18:20

bxSlider rekommenderar jag. Det är en jQuery-plugin som är lätt att implementera i sitt grundutförande.

Sedan går det att ställa in rätt mycket i den.

bya	2013-08-26 18:44

så har du ju bootstrap, väldokumenterat

http://getbootstrap.com/2.3.2/javascript.html#carousel

CotopaXi

2013-08-26 19:44

http://dev7studios.com/nivo-slider

bird200

2013-08-26 20:17

Citat:

Ursprungligen postat av bya (Inlägg 20476210)

så har du ju bootstrap, väldokumenterat

http://getbootstrap.com/2.3.2/javascript.html#carousel

Denna slider ser riktigt bra ut och uppfyller alla mina krav MEN den är inte enkel att implementera. Den exempelkod som finns under slidern är ju värdelös om man inte är "kvantfysiker" och naturligtvis går det inte att få slidern att fungera.

Kan någon lite mer i detalj gå igenom hur man får den vackra slidern ovan att fungera. Kanske finns det en youtube-film?

DanielN

2013-08-27 01:59

En framåt och bakåt knapp! Låter sjukt avancerat... Skämt och sido, dra iväg ett pm till mig med din mejl så skickar jag över en bra slider.

allstars

2013-08-27 08:48

Jo använder man inte bootstrap är den nog inte så lättimplementerad

Nerix

2013-08-27 09:44

Citat:

Ursprungligen postat av bird200 (Inlägg 20476213)

Det är ju bara att kopiera koden, dom har ju ett fullt fungerande exempel.

Pjotr

2013-08-27 16:21

Kika på detta snabbt ihophackade exempel

http://jsfiddle.net/fshsweden/JpLUq/4/

Kolla på "External references" så inkluderas en CSS och en JS från Bootstrap 2.3.2

H S Consulting

2013-08-27 17:35

Jag har använt Coroufredsel i flera projekt och gillar den av flera anledningar, bl.a. responsiv, enkelt att anpassa efter smak och tycke, enkel att jobba med. http://caroufredsel.dev7studios.com/

Tsarraz

2013-08-27 19:30

Jag gillar denna
http://www.jacobhallsten.se/jslide/

entep

2013-08-27 23:52

jQuery Cycle är den jag använder allra mest.
Fungerar klockrent.

Dom har en ny variant med alla möjliga inställningar. Kolla deras demos: http://jquery.malsup.com/cycle2/

allstars

2013-08-28 08:48

Citat:

Ursprungligen postat av Nerix (Inlägg 20476237)

Det är ju bara att kopiera koden, dom har ju ett fullt fungerande exempel.

Känns ju rätt onödigt att referera in hela bootstrap om man bara ska använda slidern.

H S Consulting

2013-08-28 10:12

Inte för att jag är någon fantast av Bootstraps slider, men när det gäller Bootstrap generellt så kan man plocka de komponenter som behövs, man behöver alltså inte ladda in hela ramverket för att använda enstaka komponenter. Det är en stor fördel med Bootstrap tycker jag.

rsp	2013-08-28 14:56

Denna är trevlig: http://owlgraphic.com/owlcarousel/index.html

allstars

2013-08-29 08:36

Citat:

Ursprungligen postat av rsp (Inlägg 20476342)

Denna är trevlig: http://owlgraphic.com/owlcarousel/index.html

Håller med, den såg fin ut.

Nihilnovi

2013-08-29 08:57

Citat:

Ursprungligen postat av allstars (Inlägg 20476319)

Känns ju rätt onödigt att referera in hela bootstrap om man bara ska använda slidern.

Det är väl därför man kan välja exakt vilka delar av bootstrap man vill ha med på http://getbootstrap.com/2.3.2/customize.html :)

bird200

2013-09-12 19:51

Citat:

Ursprungligen postat av Pjotr (Inlägg 20476280)

http://jsfiddle.net/fshsweden/JpLUq/4/

Kolla på "External references" så inkluderas en CSS och en JS från Bootstrap 2.3.2

Behöver lite hjälp med denna.

I HTML-texten begriper jag att jag utöver den kod som finns på sidan behöver lägga till följande

"
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">

</head>

<body>
"

Genom "<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">" i <head> anropar jag css-filen.

Men hur implementerar jag javasrciptet? Utan javascriptet så fungerar inte slidern utan endast den första bilden visas.

Tacksam för hjälp och kloka ideer

AmoZ	2013-09-13 17:53

Kan du inte bara implementera via <script src="javascript.js"></script> om du stoppar scriptet innan <link>?

Kanske är fredagstrött dock... :)

Clarence

2013-09-13 18:19

Citat:

Ursprungligen postat av bird200 (Inlägg 20477210)

Lägg javascripten i en JS-fil som du inkluderar med script-tagg precis innan </body>

Ladda karusellen vid onload, exempel:

Kod:

$(document).load(function(){

$('.carousel').carousel()

});

Koden fungerar lika bra att lägga direkt i en script-tagg var som helst på din sida. Men det är best practice att ladda javascript via separat fil och sist i DOM-trädet.

bird200

2013-09-13 19:29

Citat:

Ursprungligen postat av Clarence (Inlägg 20477258)

Lägg javascripten i en JS-fil som du inkluderar med script-tagg precis innan </body>

Ladda karusellen vid onload, exempel:

Kod:

$(document).load(function(){

$('.carousel').carousel()

});

Koden fungerar lika bra att lägga direkt i en script-tagg var som helst på din sida. Men det är best practice att ladda javascript via separat fil och sist i DOM-trädet.

Jag har kunnat ladda ned javascriptet i en JS-fil som heter "bootstrap.min.js"

Vilken kod skall jag skriva i <head>-taggen för att jag skall kunna åberopa detta javascript som ligger i filen bootstrap.min.js ?

Sedan vore jag mycket tacksam om du eller någon förklarade i detalj vad som menas med

"

Kod:

$(document).load(function(){

$('.carousel').carousel()

});

"

Vad gör följande kod? När jag klistrar in den i mitt HTML-dokument händer inget. Förklara för mig som om jag var 5 år för det är där min kunskap om detta ligger. Uppskattar all hjälp jag kan få.

webbrob

2013-09-13 22:19

En slider som är lätt att använda och modifiera tycker jag är Flexslider. Har använt den på säker 20 sajter. Dessutom responsive, vilket en slider idag bör vara.

http://www.woothemes.com/flexslider/

pelmered

2013-09-13 23:41

Det finns väldigt många bra sliders. Vilken som är bäst beror mycket på vad man vill kunna göra.
Det finns vissa grymma sliders med massor av häftiga funktioner som t.ex. LayerSlider eller Royal Slider, men sen finns det enklare sliders som bara sliders som t.ex. FlexSlider och Orbit. Ibland har jag till och med gjort en egen slider med annimationer och CSS transitions.

Det finns ingen slider som är bäst för allt, utan det gäller att välja vilken slider man ska beroende på vad man är ute efter. Flexslider är dock den slider som jag använt överlägset mest. Den är väldigt snabb, enkel och har alla basic-funktioner som man kan förvänta sig. Tynger inte ned sidan så mycket.

bird200

2013-09-14 12:34

Jag hoppas verkligen att någon kan svara på denna enkla fråga.

Jag vill använda denna slider: http://jsfiddle.net/fshsweden/JpLUq/4/

Jag har laddat ned Css-filen och Javascripfilen som behövs och döpt dem till bootstrap-combined.min.css respektive bootstrap.min.js

Nu behöver jag veta EXAKT vilken kod jag skall skriva i <head>-taggen för att jag skall kunna anropa filerna så att min slider fungerar.

Är det någon som kan berätta detta för mig?

bird200

2013-09-14 21:21

Lutar nu istället åt att jag kommer att köpa wow-slider för 99 USD.

Verkar enkelt att använda den då man i princip inte behöver programmera.

Någon annan som använder den? Några nackdelar med den? Känns som att den är väldigt enkel att använda med många olika mallar och enkel att ändra efter sina behov. 700 kr är ju lite pengar, men å andra sidan kommer det ta flera dagar att lära sig gratis-alternativen och det är ju en indirekt arbetskostnad.

Frågan är om det är värt 700 kr för att få in en slider på sin sida, men jag tror att det kan vara det. Det höjer nivån ganska mycket och man får in rätt mycket information på ett litet utrymme.

pelmered

2013-09-15 20:48

99 USD för en slider är ganska dyrt, men tanke på hur många gratisalternativ det finns och att de flesta andra som kostar brukar kosta runt 10-25 USD.

Jag tror heller inte att de köpta är enklare att använda, utan snarare tvärt om eftersom de oftast är mycket mer avancerade.

Med de flesta sliders är det bara att inkludera CSS-filen och Javascript-filen, lägga till rätt HTML där du vill ha slidern och sedan köra en rad med Javascriptkod som oftast är er en selector där du väljer vilket element slidern ska köras i och sedan ett anrop till sliderskriptet.

Alla tider är GMT +2. Klockan är nu 10:17.