I am trying to create a carousel with two rows, and 4 columns on each row. I am trying to use SliderJS to do so, however I am experiencing some strange behaviour: the width of the cells seems to expand for some reason.
I am using more or less of the exact same code as the demos do on the SliderJS website
Attached is a video of what is occurring, and my code below.
Expected behaviour is a carousel with 2 rows and 4 columns, but as you can see in the video, the carousel seems to be expanding to the infinity!
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
import "./carousel.scss";
// import required modules
import { Grid, Pagination } from "swiper";
export default function Carousel() {
return (
<>
<Swiper
slidesPerView={3}
grid={{
rows: 2,
}}
spaceBetween={30}
modules={[Grid, Pagination]}
className="mySwiper"
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
<SwiperSlide>Slide 5</SwiperSlide>
</Swiper>
</>
);
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: calc((100% - 30px) / 2) !important;
}
hope this helps codesandbox
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
import "./carousel.css";
// import required modules
import { Grid, Pagination } from "swiper";
export default function Carousel() {
return (
<>
<Swiper
slidesPerView={3}
grid={
{
// rows: 2,
}
}
spaceBetween={30}
// modules={[Grid, Pagination]}
className="mySwiper"
>
<SwiperSlide>
<p>Hello wolr</p>
<p>Hello wolr</p>
</SwiperSlide>
<SwiperSlide>
<p>Hello wolr</p>
<p>Hello wolr</p>
</SwiperSlide>
<SwiperSlide>
<p>Hello wolr</p>
<p>Hello wolr</p>
</SwiperSlide>
<SwiperSlide>
<p>Hello wolr</p>
<p>Hello wolr</p>
</SwiperSlide>
<SwiperSlide>
<p>Hello wolr</p>
<p>Hello wolr</p>
</SwiperSlide>
</Swiper>
</>
);
}
Removing it from flexbox fixed issue.
Unsure why swiperJS glitches like so in the flexbox
Related
I am working on a web based project. All code is executed but the styles are not being applied to files. Below is code of my react file. I also added my css file below it.
I tried using .sass extension which is also not working.
Can anyone help me with it? How do I apply styles?
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;
This is the css file
.App{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
.APP input{
margin-top: 20px;
width:350px;
height: 40px;
font-size: 20px;
padding-left: 10px;
}
Well it doesn't work because you didn't add className attribute in JSX code in first div and maybe you should rename .APP input to .App input in your CSS file as you also want same styling in input tag also.
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div className='App'>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;
Best Practice in React:
import React, { useState, useEffect } from "react";
import "./App.css";
import Axios from "axios";
function App() {
const [searchVal, setSearchVal] = useState("");
//getting values from DB
const content = collegeList
.filter((val) => {
if (searchVal == "") {
return val;
} else if (
val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())
) {
return val;
}
})
.map((val) => {
return (
<div className="clgListDiv">
<p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
);
});
return (
<div>
<input
type="text"
placeholder="Search College"
onChange={(event) => {
setSearchVal(event.target.value);
}}
></input>
{content}
</div>
);
}
export default App;
My react file isn't picking up my external styles.css
index.js :
import React from "react";
import ReactDOM from "react-dom";
import "./css/styles.css";
ReactDOM.render(
<div>
<h1 className="upper-deck"> Hello world </h1>
</div>,
document.getElementById("root")
);
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
.upper-deck {
font-size: "90px";
}
Project folder format :
Don't use quotes for scaler values in CSS. Remove the quotes around the pixel value for the font size.
.upper-deck {
font-size: 90px;
}
I have a ClassName="logo" that I would like to use to style the logo in the component file. Having no joy thus far. Am I missing something here?
Index file, location the footer will display:
import React from "react"
import Header from "../components/header"
import Hero from "../components/hero"
import Footer from "../components/footer"
export default () => (
<>
<Footer></Footer>
</>
)
Footer css file:
#import "../styles/global.scss";
.footer {
background-color: $black;
color: $white;
height: 230px;
text-align: center;
.logo {
height: 20px;
}
}
Footer.js file:
import React from "react"
import footerStyles from "./footer.module.scss"
export default ({ children }) => (
<>
<div className={footerStyles.footer}>
<img className="logo" src="/svgs/logo_white.svg" alt="logo text"></img>
</div>{children}</div>
</>
)
I'm trying to make my first React Project for a school task.
I started to with npm install -g create-react-app then create-react-app my-app.
I added some html to the app and that works great in the browser. Now I have created a button.js file and a button.css file.
I can't see any changes that I do in the button.css file.
Is it something wrong on the code or do I need to add something more to get the css work?
src/App.js
import React, { Component } from "react";
import './App.css';
import Button from './components/Button';
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
);
}
}
export default App;
src/compontents/Button.js
import React, { Component } from "react";
import './Button.css';
class Button extends Component {
render() {
return (
<div className="button">
{this.props.children}
</div>
);
}
}
export default Button;
src/componentes/Button.css
.button {
display: flex;
height: 4em;
flex: 1;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
background-color: #e0e1e6;
color:#888;
outline: 1px solid #888;
}
Since you used the lowercased button, it is interpreted as the normal <button> element instead of your <Button> component.
Your App.js should look like this.
import React, { Component } from "react";
import "./App.css";
import Button from "./components/Button";
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
</div>
);
}
}
export default App;
I'm running into a classnames issue with sass modules in Preact:
// Card component
import { h, Component } from "preact";
import cx from "classnames";
import style from "./style";
export const Card = () => {
return (
<div class={style.card}>
<div class={cx(style.image, "image-item")} />
<div class={style.body} />
</div>
);
};
// in style.scss
.card {
.image-item {
margin-bottom: 23px;
}
}
The specified margin-bottom css does not get applied, any ideas?