I have a couple of images, and in mobile screen view I am using snapping to show 1 image at a time and the user can scroll right to the next image.
I want to put some pagination dots under the image to show the user that he/she can scroll to the right for more image.
const NUMBER_OF_PAGES = 4
const [currentPage,setCurrentPage] = useState(1)
return(
<>
<div className="flex flex-row overflow-scroll no-scrollbar snap-x snap-mandatory">
<img src={screen1} alt="Playstore image1" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen2} alt="Playstore image2" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen3} alt="Playstore image3" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
<img src={screen4} alt="Playstore image4" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
</div>
<div>
{Array.from({ length: NUMBER_OF_PAGES }, (_, i) => i + 1).map(item=>(
<div className='w-5 h-5 bg-slate-600 rounded-full shadow-md mx-4'/>
))}
</div>
</>
)
How can I track the currently selected image, and change the styling depending on that?
You can solve this by conditionally adding a class depending on whether the index of each pagination dot is equal to the currently selected page:
{Array.from({ length: NUMBER_OF_PAGES }, (_, i) => i + 1).map((item, index)=>(
<div className={`w-5 h-5 ${currentPage == index ? "bg-blue-600" : "bg-slate-600"} rounded-full shadow-md mx-4`}/>
))}
If you update your code with the JSX snippet above, the currently active pagination dot (ie: the dot matching the current page) will be styled differently to the non-active dots.
You can update this as you see fit; for the purposes of this example, I styled the active pagination dot to be blue. As the user moves through the images, the active pagination dot will then update.
Related
I'm making a website using react and tailwind. I want to add a vertical scrollbar to a list in a section of my page, but when I do, the bullets disappear. Why is this happening?
<ul className="list-disc overflow-y-auto h-80 space-y-3 text-sm w-full sm:text-md items-start">
{experience.points.map((point, i) => (
<li key={i}>{point}</li>
))}
</ul>
I've tried using overflow-y-scroll instead but it has the same effect. I've also tried adjusting the margins of the list container but that doesn't work either. The bullets appear when I don't use any overflow utility. For now, I've just added them to each list-item string manually but I'm curious as to why this would happen.
what you are missing is the css rule that sets the counter inside or outside
in tailwind 3 it's the class list-inside
plain css: list-style-position: inside;
being it set outside by default, setting the overflow cuts them out
Try this -
<ul className="list-disc overflow-auto h-80 space-y-3 text-sm w-full sm:text-md items-start p-2">
{experience.points.map((point, i) => (
<li key={i} className='list-disc p-2'>{point}</li>
))}
</ul>
iam just learning about React JS and a Tailwind, so i want to make a Carousel for my website project using a React JS & TailwindCSS, I've already make the Carousel but its not done yet, i want to make the Carousel Slide Horizontally and if the Carousel reach the end i iwant to make it back to beginning. Here's my code
`
<div className="mx-10 py-5 overflow-x-hidden">
<div className={`flex flex-none min-w-screen bg-gray-900 space-x-10 transition-transform duration-300 -translate-x-[${index}rem]`}>
<div className={`wrapper flex-none w-[55%] h-48 bg-gradient-to-r from-green-300 to-cyan-400 rounded-3xl text-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-fuchsia-600 to-pink-500 rounded-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-red-400 to-orange-300 rounded-3xl`}>
</div>
</div>
</div>
`
Sorry for my english
I want to make my Carousel works, the Carousel that i make can slide from begin to end, and at the end it will back to beginning again.
I am trying to apply a style to my links when they are focused. But it does not work. I am using tailwindcss (on a React js application).
Here is my code :
<Link to='/clients' className=''>
<div className="text-2sm font-semibold flex items-center mb-4 hover:bg-[#BE97C6] focus:bg-[#BE97C6] px-2 py-1 rounded-full transition ease-in-out ">
<IoPersonCircleSharp className="text-xl mx-1"/>
<p className="">Clients</p>
</div>
</Link>
Can you, please, help me to solve it ? Thanks you !
Your Link is getting focused and not the div.
Try to set group class on Link and then group-focus:bg-[#BE97C6] on the div.
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
hello i am facing a issue with react tailwind text area , i am tring to apply mt-5 but it is not working. When i added using style={{marginTop:"1.25rem"}} it is working , similarly properties like height margin ... are not applying to text area in react
function (){
return (
<div className=" w-24 m-5">
<input placeholder="name" className="pl-2 rounded-sm" />
<textarea className=" mt-5"></textarea>
<button className="mt-5 bg-gray-300 text-gray-800 px-2 py-1 hover:bg-black hover:text- white rounded-sm hover:underline">
submit
</button>
</div>
);
}
i actually find a problem that the react is adding a additional style to the textarea and that is overwriting the textarea, i find this is inspector, in textarea there is a additional style
how can i avoid this aditional style and who is adding it, is it tailwind or react
this was not problem with tailwind nor react , it was my browser and extensions, i removed those extensions and it is working