Casting a spell on learners since 2007
BLOG UNDER CONSTRUCTION
Stay Tuned!
--------------------------------------------------------------------------------------------------------------------------
About me:
As a NIE-trained teacher with 15 years of experience teaching Science to Primary school students and marking PSLE Science papers, I believe I can help your child bridge their learning gaps to achieve their goals in Science.
I have slots available currently to walk with your child/children not only to be exam smart, but to also develop the passion for Science.
--------------------------------------------------------------------------------------------------------------------------
2. The CSS Styling
You must add this CSS to your Blogger Theme's "Custom CSS" section (usually under Theme > Customize > Advanced > Add CSS).
This CSS is specifically configured for 6 slides.
CSS
/* --- CAROUSEL BASE STYLES --- */
.carousel-container {
width: 100%;
max-width: 500px; /* Adjust to your preferred maximum width */
margin: 20px auto; /* Centers the carousel */
overflow: hidden; /* Hides images not in view */
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Soft shadow for lift */
border-radius: 8px;
}
/* HIDES RADIO BUTTONS */
.carousel-container input[type="radio"] {
display: none;
}
/* SLIDES LIST SETUP */
.carousel-slides {
list-style: none;
margin: 0;
padding: 0;
width: 600%; /* REQUIRED: (Number of Slides * 100)% = 6 * 100% */
display: flex;
transition: margin-left 0.6s ease-in-out; /* Smooth sliding transition */
}
/* INDIVIDUAL SLIDE SETUP */
.carousel-item {
width: calc(100% / 6); /* REQUIRED: (100% / Number of Slides) */
flex-shrink: 0;
}
.carousel-item img {
width: 100%;
/* Maintain aspect ratio - you might need a fixed height if images are different sizes */
height: auto;
display: block;
}
/* --- NAVIGATION DOTS STYLING --- */
.carousel-nav {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for dots */
padding: 5px 10px;
border-radius: 20px;
}
.dot {
width: 8px;
height: 8px;
background: #aaa; /* Default dot color */
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: background 0.3s;
}
/* --- SLIDING LOGIC (CSS HACK) --- */
/* Shifts the entire list to the left based on which radio button is checked */
#slide-2:checked ~ .carousel-slides {
margin-left: -100%;
}
#slide-3:checked ~ .carousel-slides {
margin-left: -200%;
}
#slide-4:checked ~ .carousel-slides {
margin-left: -300%;
}
#slide-5:checked ~ .carousel-slides {
margin-left: -400%;
}
#slide-6:checked ~ .carousel-slides {
margin-left: -500%;
}
/* DOT ACTIVE STATE */
#slide-1:checked ~ .carousel-nav .dot:nth-child(1),
#slide-2:checked ~ .carousel-nav .dot:nth-child(2),
#slide-3:checked ~ .carousel-nav .dot:nth-child(3),
#slide-4:checked ~ .carousel-nav .dot:nth-child(4),
#slide-5:checked ~ .carousel-nav .dot:nth-child(5),
#slide-6:checked ~ .carousel-nav .dot:nth-child(6) {
background: #4CAF50; /* A nice green for the active dot (matches chat bubbles) */
}
