ios – Carousel Card view not move to left side in SwiftUI


I have built a custom cardView for a shopping cart carousel. For this I designed it in CardView and then pass it to Carousel.

The problem I am facing is my card not moving to left side more. I tried different paddings and VStack alignment set to .leading also but its not move more to left side. I want to remove extra space from left side so I can adjust card accordingly.

CardView:

struct CardView: View {

    private let name: String
    private let description: String
    private let type: String
    private let buttonTitle: String
    

    init(name: String, description: String, type: String, buttonTitle: String) {
        
        self.name = name
        self.description = description
        self.type = type
        self.buttonTitle = buttonTitle

    // MARK: - Constants
    private struct ViewConstants {
        static let screenWidth = Constants.DeviceConfig.screenWidth
        static let cardRatio = 300.0/337.0
        static let cardWidth = 300.0
        static let cardHeight = 369.0
        static let imageHeight: CGFloat = cardWidth/2 +  20
    }
    
    var body: some View {
        VStack(spacing: 8) {
            Image("laptop")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: ViewConstants.imageHeight)
                .padding(.top, 10)
            
            Text("Personal Laptop")
                .lineLimit(1)
                .multilineTextAlignment(.center)
                .padding(.bottom, 2)
            
            Text("The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog")
                .lineLimit(3)
                .multilineTextAlignment(.center)
                .padding(.horizontal, 24)
            
            Button(action: {
                print("sign up bin tapped")
                onTap()
            }){
                Text("Click for Offer")
                    .frame(height: 10)
                    .font(.system(size: 18))
                    .padding()
                    .foregroundColor(.black)
                    .overlay(
                        RoundedRectangle(cornerRadius: 25)
                            .stroke(Color.black, lineWidth: 2)
                    )
            }
            .padding(.top, 4)
            .padding(.bottom, 24)
            
        }
        .frame(width: ViewConstants.screenWidth - 100, height: ViewConstants.cardHeight)
        .background(Color.yellow)
        .cornerRadius(12)
    }
}

Main Page I called CardView with Carousel:

private var carouselContent: some View {
        VStack(alignment: .leading) {
            CarouselView(
                itemsPadding: 12,
                trailingSpaces: 20 * 5,
                index: $viewModel.Index,
                list: viewModel.cartProducts,
                showIndicator: true,
                contentView: { cart in
                    CardView(name: cart.name, description: cart.description, type: cart.type, buttonTitle: cart.buttonTitle) {}
                }
            )
        }
    }

CardView

Main Page Carousel – I want to move left

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img